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.

Answer 1

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.