Angular 4のフォームコントロールアレイの変更を検出する方法は？

Question

私はAngular 4プロジェクトに取り組んでいます。私はフォームコントロール配列の変更を検出する必要があります。例えば私はプロバイダの名前のフォームコントロールの配列を、その変更を検出する方法はありますか？

export class CustomFormArray { 
public form: FormGroup; 

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

Answer 1

FormArrayAbstractControlを拡張するので、chanesを発する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ときに変更（文法または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

Answer 2

通常のフォームグループの場合と似ていますが、フォーム配列のフォームグループを初期化するたびに、フォーム配列のフォームグループを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; 
     }