113

フォームグループ:

FormGroupは、各コントロール名をキーとして、各子 FormControl の値を 1 つのオブジェクトに集約します。

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

FormArray :

FormArrayは、各子FormControlの値を配列に集約します。

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

いつ一方を他方よりも使用する必要がありますか?

4

4 に答える 4

147

FormArray は FormGroup のバリアントです。主な違いは、データが配列としてシリアル化されることです (FormGroup の場合はオブジェクトとしてシリアル化されるのとは対照的です)。これは、動的フォームなど、グループ内に存在するコントロールの数がわからない場合に特に便利です。

簡単な例で説明してみましょう。たとえば、顧客のピザの注文を記録するフォームがあるとします。そして、ボタンを配置して、特別なリクエストを追加および削除できるようにします。コンポーネントの html 部分は次のとおりです。

<section>
  <p>Any special requests?</p>
  <ul formArrayName="specialRequests">
    <li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
      <input type="text" formControlName="{{i}}">
      <button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
    </li>
  </ul>
  <button type="button" (click)="onAddSpecialRequest()">
    Add a Request
  </button>
</section>

特別なリクエストを定義して処理するコンポーネント クラスは次のとおりです。

constructor () {
  this.orderForm = new FormGroup({
    firstName: new FormControl('Nancy', Validators.minLength(2)),
    lastName: new FormControl('Drew'),
    specialRequests: new FormArray([
      new FormControl(null)
    ])
  });
}

onSubmitForm () {
  console.log(this.orderForm.value);
}

onAddSpecialRequest () {
  this.orderForm.controls
  .specialRequests.push(new FormControl(null));
}

onRemoveSpecialRequest (index) {
  this.orderForm.controls['specialRequests'].removeAt(index);
}

FormArray は、FormGroup の「addControl」、「removeControl」、「setValue」などを使用するよりも、「push」、「insert」、「removeAt」を使用して FormControl を操作する方が簡単であるという意味で、FormGroup よりも柔軟性があります。フォームの階層で適切に追跡されます。

お役に立てれば。

于 2017-01-02T08:57:20.420 に答える