Как получить FormControlName поля, значение которого изменилось в угловых реактивных формах

Question

У меня есть реактивная форма с более чем 10 элементами управления формой и использующая подписку на значения ValueChanges, наблюдаемые для обнаружения изменений.Он работает отлично, но выводом всегда является весь объект значения формы (т.е. все элементы управления формы и их значения).Есть ли способ просто получить имя элемента управления формы измененного поля?

this.form = this.fb.group({
    field1: ['', Validators.required],
    field2: ['', Validators.required],
    field3: ['', Validators.required],
    field4: ['', Validators.required],
    field5: ['', Validators.required],
    field6: ['', Validators.required],
    field7: ['', Validators.required],
    field8: ['', Validators.required],
    field9: ['', Validators.required],
    field10: ['', Validators.required],
    field11: ['', Validators.required],
    field12: ['', Validators.required],
    field13: [{ value: '', disabled: true }, Validators.required]
});

this.form.valueChanges.subscribe(
    result => this.calculateParams(result)
);

calculateParams(result) {
    console.log(result); // giving the entire form.value object
}

Answer 1

Не полностью протестировал код, но идея состоит в том, чтобы соединить элементы управления и их ключ, а затем прослушать valueChanges на каждом элементе управления одновременно и вернуть ключ объекта вместо значения (и, конечно, вы можете сопоставить и значение, и ключ с выход)

const fields={
    field1: ['', Validators.required],
    field2: ['', Validators.required],
    field3: ['', Validators.required],
    field4: ['', Validators.required],
    field5: ['', Validators.required],
    field6: ['', Validators.required],
}

zip(
 from(Object.values(fb.group(fields).controls)),
 from(Object.keys(fields))
).pipe(mergeMap([control,key])=>control.valueChanges.pipe(mapTo(key)))

Answer 2

Это обходной путь, но если сохранить старые значения, вы можете сделать что-то вроде

this.old={...this.myForm.value}
this.myForm.valueChanges.subscribe(res=>{
  const key=Object.keys(res).find(k=>res[k]!=this.old[k])
  this.old={...this.myForm.value}
})

Answer 3

Вы можете изолировать formcontrol от группы форм, используя метод get и доступ к нему valueChanges.

this.form.get('formcontrolName').valueChanges().

Примечание: form.get возвращает вам AbstractControl, в котором также есть метод valueChanges.