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）。

如果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

Answer 2

与普通表单组的方式类似。每当初始化表单数组的表单组时，只需发出/订阅更改事件表单数组的表单组。

这是样本。

 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;
        }

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

2 个答案: