Angular Reactive 表單：如何獲取剛剛更改的值

Question

我使用 angular 6 構建了一個反應式表單，該表單包含 3 個屬性（姓名、年齡、電話），我只想獲取更改后的值而不是所有表單值。

this.refClientForm = this.formBuilder.group({
  name: [],
  phone: [],
  age: []
});

對於表單偵聽器：

 this.refClientForm.valueChanges.subscribe(values => console.log(values))

但我總是得到所有形式的價值。

Answer 1

您可以檢查所有控件的臟標志。 參見https://angular.io/api/forms/FormControl

getDirtyValues(form: any) {
        let dirtyValues = {};

        Object.keys(form.controls)
            .forEach(key => {
                let currentControl = form.controls[key];

                if (currentControl.dirty) {
                    if (currentControl.controls)
                        dirtyValues[key] = this.getDirtyValues(currentControl);
                    else
                        dirtyValues[key] = currentControl.value;
                }
            });

        return dirtyValues;
}

Answer 2

有一種簡單的方法可以檢查是否有任何控件在反應形式中臟了。

getUpdatedValues() {
 const updatedFormValues = {};
 this.form['_forEachChild']((control, name) => {
  if (control.dirty) {
      this.updatedFormValues[name] = control.value;
  }
});
console.log(this.updatedFormValues);

Answer 3

更好的答案在這里找到：

Angular 2 Reactive Forms 僅從更改的控件中獲取值

this.imagSub = this.imagingForm.valueChanges.pipe(
    pairwise(),
    map(([oldState, newState]) => {
      let changes = {};
      for (const key in newState) {
        if (oldState[key] !== newState[key] && 
            oldState[key] !== undefined) {
          changes[key] = newState[key];
        }
      }
      return changes;
    }),
    filter(changes => Object.keys(changes).length !== 0 && !this.imagingForm.invalid)
  ).subscribe(
    value => {
      console.log("Form has changed:", value);
    }
  );

Answer 4

使用 pairwise() 運算符和 startWith(this.refClientForm.value) 運算符，然后表單 valueChanges 將在第一次嘗試時發出