Не знаю, хорошее ли это решение, но, думаю, оно решит вашу проблему. Также вы можете проверить консоль на StackBlitz
на вашем component.ts
form: FormGroup;
modified: Array<{ formControlName: string, controls: AbstractControl }> = [];
clickCount = 1;
ngOnInit() {
this.form = this.fb.group({
input1: new FormControl(''),
input2: new FormControl(''),
input3: new FormControl(''),
input4: new FormControl(''),
input5: new FormControl(''),
});
this.form.valueChanges.subscribe(() => this.getChanged());
}
setValue(){
this.form.get(`input${this.clickCount}`).setValue("not modified by UI");
this.clickCount++;
if(this.clickCount == 6) this.clickCount = 1;
}
getChanged() {
let controlKeys = Object.keys(this.form.controls);
controlKeys.forEach(key => {
let control = this.form.get(key);
if (control.dirty) {
let idx = this.modified.findIndex(x => x.formControlName == key);
if (idx == -1) {
this.modified.push({ formControlName: key, controls: control });
}
else {
this.modified.slice(idx, 1);
}
}
});
console.log(this.modified);
}
в вашем component.html
<input formControlName="input1" type="text"/>
<input formControlName="input2" type="text"/>
<input formControlName="input3" type="text"/>
<input formControlName="input4" type="text"/>
<input formControlName="input5" type="text"/>