Angular custom form control not updating form value

Question

I have a password input component, which is a custom form control.

The problem is, when I type into the input, the form value (created with FormGroup) is not being updated.

However, when I use form.get('key').setValue('value here'), the form value as well as the component are updated correctly.

What might be the issue?

Using Angular v13.2.1 • Whole source code • component with the form • password input component
Wanted to upload it to Stackblitz, but was getting many unrelated errors.

Hi there joker876! While I'm sure this question was in a good place nearly two years ago, you've got dead links for your original problem code, which renders the question less helpful than it was. While pasting code into a text editor can be onerous, I recommend trying to recover your code and paste it into this question so that people can learn from the problem you solved. — Andrew Gray
– Andrew Gray, Commented Sep 21, 2023 at 16:08

Jamal Salman · Accepted Answer · 2022-02-09 11:08:53Z

2

writeValue function is called by angular when the input in the ui gets updated. onChange should be called by the component whenever an internal change should be reflected in the ui. So it's not quite right to call onChange whenever writeValue gets called by angular. Instead, you should set the form control value in onChange. Also, by putting [value] = "value" on the input, and calling onInput(), you're calling on change with an outdated value of the value variable. Try using 2 way binding using [(ngModel)] = "value" and (ngModelChange) instead.

answered Feb 9, 2022 at 11:08

Jamal Salman

3975 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joker876 Over a year ago

the ngModel and ngModelChange combo made it work. Thanks!

hs27 Over a year ago

But, what should be the case with reactive angular forms? @jamal-salman

Collectives™ on Stack Overflow

Angular custom form control not updating form value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related