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?
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?
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