Angular custom form control not updating form value

joker876

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 codecomponent with the formpassword input component
Wanted to upload it to Stackblitz, but was getting many unrelated errors.

Jamal Salman

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular ControlValueAccessor onChanges not updating form control value

Google place directive not updating form control value in angular 2

Angular: form control value and form value not the same

Angular ExpressionChangedAfterItHasBeenCheckedError on custom form control

Angular form control not updating until next click

Angular - Form Builder - Form Control invalid not updating / ngIf error

How to detect changes in the bound form variable value in a custom form control (Angular 10)

Angular updates form control value on value change

Angular 2 - Custom Form Control - Disable

Angular5 Custom Form Control Into formControl

Access valid value of custom form control

writeValue with invalid value in custom form control

Angular reactive form value not updating on form array push

Angular Custom Form Control never make my Form dirty

Consistent updating of validation state in a custom reactive form control?

How to display the form control value in Angular 6?

Angular4 - No value accessor for form control

Angular4 - No value accessor for form control

datepicker not binding the value to the angular form control

angular: directive transform value of form control

Angular4+ No value accessor for form control

Angular: Disabling child control updating the parent form Pristine status

Angular reactive form, Dynamic validator not updating control validity

Create a custom form control

Angular material Datepicker throws More than one custom value accessor matches form control with unspecified name attribute

Angular Material custom form field control's value is not updated in the calling FormGroup

How to pass Form Control value to custom Validator Function's Parameter in Angular 5 Reactive Forms

Custom component value is not updated with Angular Reactive Form

Angular taking control of the Form