如何检测 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

与您对普通表格组的处理方式类似。每当您初始化表单数组的表单组时，只需 emit/subscribe 更改您的表单数组的表单组事件。

这是示例。

 export class CustomFormArray {
     public form: FormGroup;

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

      this.providers.push(this.createprovidersFormGroup())
      }

    createprovidersFormGroup(){
          let form = this._formBuilder.group({
                         abc: "abc"


                     });

              form.valueChanges.subscribe(data => {
                  console.log('Form changes', data)
              });

         return form;
        }

Answer 2

FormArray 扩展了 AbstractControl 所以它有 valueChanges 属性会发出变化。

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 将 return 一个包含每个输入字段值的数组，当任何更改（语法上或来自 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

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

How to detect changes in form control array in Angular 4?

angular

angular4-forms