Angular 形式 : value changes for each individual control

Question

我想听取表单的值更改，但不是针对整个表单，而是仅针对已更改的表单控件。

例如，如果我的表单看起来像这样。

this.form = this._fb.group({
  firstName: [''],
  lastName: [''],
  ... // other stuff.
});

如果我然后订阅 valuechanges

this.form.valueChanges.subscribe((e) => {
  console.log(e);
});

然后在表单中填写名字会打印出整个表单值对象。

{firstName: 'input', lastName: '', ...}

但我想知道的是哪个表单控件(在本例中为 firstName)在没有订阅每个单独的表单控件的情况下被更改。这样我想要的输出只有

{firstName: 'input'}

Answer 1

首先，多个AbstractControl(例如FormControl， FormGroup，FormArray)在内部存储为树.

// FG - FormGroup
// FA - FormArray
// FC - FormControl

    FG
  /   \
FC    FG
    /    \
  FC     FA
        / | \
      FC FC FC

以上片段摘自 A thorough exploration of Angular Forms .

由于这个原因，当 FormGroup 子级的 valueChanges 发出时，FormGroup.valueChanges 发出:

updateValueAndValidity (/* ... */) {
  /* ... */

  if (opts.emitEvent !== false) {
    (this.valueChanges as EventEmitter<any>).emit(this.value);
    (this.statusChanges as EventEmitter<string>).emit(this.status);
  }
  
  if (this._parent && !opts.onlySelf) {
    this._parent.updateValueAndValidity(opts);
  }
  
  /* ... */
}

在above snippet ，如果我们考虑您的示例，_parent 可以在 firstName 时引用 this.form FormGroup 实例FormControl 接收一些输入。

---

因此，实现您正在寻找的方法是这样的:

merge(
  ...Object.keys(this.form.controls).map(
    k => this.form.controls[k].valueChanges.pipe(
      // Getting a decent format: `{ formControlName: formControlValue }`
      map(v => ({ [k]: v })),
    )
  )
).subscribe(console.log)

FormGroup.controls 有 this signature :

public controls: {[key: string]: AbstractControl},