如何检测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)时,in subscribe将返回一个数组,其中包含每个输入字段的值.

在若情况下,有FormGroup在FormArray未发生任何变化.只需使用以下组件代码.

(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