web-dev-qa-db-ja.com

Angular 4）のフォームコントロール配列の変更を検出する方法

Angular 4プロジェクト。

export class CustomFormArray {
 public form: FormGroup;

 constructor(private _fb: FormBuilder) {
      this.form = _fb.group({
           providers: _fb.array([])
      });
  }
}
angularangular4-forms
7
Tarnjeet Singh

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">

Subscribeの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>

ここに プランカー

11
user1533603

通常のフォームグループの場合と同じです。フォーム配列のフォームグループを初期化するときはいつでも、フォーム配列のフォームグループの変更イベントを発行/サブスクライブするだけです。

こちらがサンプルです。

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