BinaryDevelop
  1. ホーム
  2. angular

[解決済み] FormGroupとFormArrayの使い分けは？

2022-10-03 23:53:33

質問

フォームグループ :

A フォームグループ は、各子フォームコントロールの値を集約して1つの オブジェクトに集約し、各コントロールの名前をキーとします。 

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

フォームアレー :

A FormArray は、各子フォームコントロールの値を集約して 配列に集約します。 

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

どのような場合にどちらを使うべきでしょうか？

どのように解決するのですか？

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 よりも柔軟性があり、FormGroup の "addControl", "removeControl" などを使うよりも "push", "insert", "removeAt" などを使う方が簡単に FormControls を操作することができます。FormArray メソッドは、コントロールがフォームの階層で適切に追跡されることを保証します。

は、これが役立つことを願っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します