Angular reactive forms key changes detection

Viewed 819

Given valueChanges listener with Angular Reactive Forms

this.companyForm.valueChanges.subscribe((value) => {
  console.log('setChangesListener value', value);
});

How do I find which field was changed exactly?

4 Answers

There's no way to see which field changed from the top level form subscription.


However, you can individually subscribe to form controls and that way you know exactly which field changed:

Object.entries(this.formGroup.controls).forEach(value => {
  const [key, control] = value;
  control.valueChanges.subscribe(
    (value) => {
      console.log(key, value);
    },
  );
});

For detecting changes in value of a particular field, 'valueChanges' event on that field can be subscribed, as shown below:

this.formGroup.controls['FieldName'].valueChanges.subscribe(change => {
        console.log(change);
});

The better option is to subscribe valuechange in form control rather than doing it on formGroup, this way you don't need to check for the field.

this.formGroup.get('formControlName').valueChanges.subscribe(val => {
       console.log(value)
    });

If you need to capture keychange event, you can bind keyup or keydown event in your template with a function call.

<input  type="text" (keyup)="handleKeyUpEvent($event)"/>

as per angular documents

you can check for form controls with dirty flag true

this.formGroup.valueChanges.subscribe(val => 
  console.log(
    Object.keys(this.formGroup.controls).filter(
      item => item.value.dirty
    )
  );
);

the console output is an array of strings with controls whose values have changed

I think this is the best solution

Related