web-dev-qa-db-ja.com

一連のフィールドを反応フォームに動的に追加する

名前と姓の2つの入力フィールドがあります。私には2つのボタンがあります。送信と「人物の追加」です。 「人物を追加」をクリックすると、新しいフィールドセット（名前と姓）が追加されます。それを達成する方法は？単一の入力フィールドを動的に追加する方法の解決策を見つけましたが、ここではセットを追加する必要があります

「人を追加する」機能のない私のコード：

import { FormControl, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
   form: FormGroup;
   constructor(){}
   ngOnInit(){
     this.form = new FormGroup({
       name: new FormControl('', [Validators.required, Validators.minLength(2)]),
       lname: new FormControl('', [Validators.required, Validators.minLength(2)])
     });
   }
 ....
 }

テンプレート：

<form [formGroup]="form" (ngSubmit)="submit()">
    Name: <input type="text" formControlName="name">
    Last Name: <input type="text" formControlName="lname">
    <button type="button">Add a Person</button>
    <button type="submit">Submit</button>
</form>
angularangular-reactive-formsreactive-forms
4
Anna Olshevskaia

必要なのはFormArrayです。あなたの例のように2つのFormControlsの名前と姓を持つ複数の要素を指定すると、これを行うことができます： https://stackblitz.com/edit/angular-ztue

これが起こっていることです：

フォームグループは定義したとおりに定義しますが、FormArrayタイプの1つのフィールドで作成します

_ngOnInit() {
  this.form = this.fb.group({
    items: this.fb.array([this.createItem()])
  })
}
_

次に、上記で使用するヘルパーメソッドcreateItem()を定義して、乗算するコントロールのセットをグループ化します

_createItem() {
  return this.fb.group({
    name: ['Jon'],
    surname: ['Doe']
  })
}
_

そして最後に、このセットのアイテムを乗算する方法：

_addNext() {
  (this.form.controls['items'] as FormArray).Push(this.createItem())
}
_

以下のhtmlと組み合わせてください。配列項目を繰り返し処理し、グループのフィールドを表示しています。ここのフォームグループ名は配列のインデックスです。

_<form [formGroup]="form" (ngSubmit)="submit()">
  <div formArrayName="items"
    *ngFor="let item of form.controls['items'].controls; let i = index">
    <div [formGroupName]="i">
      <input formControlName='name'>
      <input formControlName='surname'>
    </div>
  </div>
  <button type="button" (click)="addNext()">Add Next</button>
  <button type="submit">Submit</button>
</form>
_

また、アイテムのセットを拡張してフォームを作成できます。

15
Marcin Tomczyk