angular - 如何检测 Angular 4 中表单控件数组的变化？

Question

我正在开发 Angular 4 项目。我需要检测表单控件数组的变化。例如我有一个名为 providers 的表单控件数组，如何检测它的变化？

export class CustomFormArray {
 public form: FormGroup;

 constructor(private _fb: FormBuilder) {
      this.form = _fb.group({
           providers: _fb.array([])
      });
  }
} 

Answer 1

FormArray 扩展了 AbstractControl，因此它具有 valueChanges 属性，可以发出 chanes。

this.form = this.fb.group({
  providers: this.fb.array([]),
});
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required));
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required));

(this.form.get('providers') as FormArray).valueChanges.subscribe(values => {
  console.log(values);
});

在您的模板中:

<input *ngFor="let field of form.controls.providers.controls;" [formControl]="field">

订阅中的 values 将返回一个数组，其中包含每个输入字段的值，当任何更改(语法或从 UI)时。

如果 FormArray 中有 FormGroup 则没有任何变化。只需使用以下组件代码。

(this.form.get('providers') as FormArray).push(this.fb.group({
      'name': '',
      'age': ''
    }));

模板将是:

<div *ngFor="let field of form.controls.providers.controls;" [formGroup]="field">
  <input formControlName="name" placeholder="name">
  <input formControlName="age" placeholder="age">
</div>

这里是 plunker