web-dev-qa-db-ja.com

FormGroupとFormArrayを使用する場合

FormGroup ：

FormGroupは、各子コントロールの値を、各コントロール名をキーとして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'),
]);

一方を他方に対して使用する必要があるのはいつですか？

angularangular2-forms
53
jcroll

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よりも柔軟性があります。フォームの階層で適切に追跡されます。

お役に立てれば。

75
Usman

リアクティブフォームを作成するには、親FormGroupが必要です。このFormGroupには、さらにformControls、子formGroups、またはformArrayを含めることができます

FormArrayには、formControlsの配列またはformGroup自体をさらに含めることができます。

formArrayはいつ使用する必要がありますか？

この美しい post を読んでください。これはformArrayの使い方を説明しています

そのブログの興味深い例は、旅行formGroupについてです

formGroupおよびformControlを使用した旅行formArrayの構造は次のようになります。

this.tripForm = this.fb.group({
      name: [name, Validators.required],
      cities: new FormArray(
     [0] ---> new FormGroup({
                 name: new FormControl('', Validators.required),
                 places: new FormArray(
                      [0]--> new FormGroup({
                                 name: new FormControl('', Validators.required),
                             }),
                      [1]--> new FormGroup({
                                 name: new FormControl('', Validators.required),
                             })
                      )
              }), 
     [1] ---> new FormGroup({
                 name: new FormControl('', Validators.required),
                 places: new FormArray(
                          [0]--> new FormGroup({
                                     name: new FormControl('', Validators.required),
                                 }),
                          [1]--> new FormGroup({
                                     name: new FormControl('', Validators.required),
                                 })
                          )
              }))
})

この DEMO で遊ぶことを忘れずに、旅行のcitiesおよびplacesの配列の使用に注意してください。

11
Amit Chigadani

angularドキュメントから、次のことがわかります。

FormArrayは、任意の数の名前のないコントロールを管理するためのFormGroupの代替です。フォームグループインスタンスと同様に、フォーム配列インスタンスに対してコントロールを動的に挿入および削除でき、フォーム配列インスタンスの値と検証ステータスはその子コントロールから計算されます。ただし、各コントロールのキーを名前で定義する必要はありません。したがって、子の値の数が事前にわからない場合、これは素晴らしいオプションです。

それらの例を示して、私がこれをどのように理解しているかを説明してみましょう。ソースを見ることができます こちら

魔女が次のフィールドを持っていると想像してください

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      Zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

ここにはfirstName、lastName、address、およびaliasesがあります。すべてのフィールドはフォームグループなので、すべてをgroupでラップします。同時にaddressはサブグループのようなものなので、別のgroupでラップします（理解を深めるためにテンプレートを見ることができます）！ここでのすべてのフォームは、keyを除くaliasesを制御します。つまり、formBuilderのようなPushメソッドを使用して、単純な配列のように値を必要なだけプッシュできます。

これは私がそれを理解する方法です、それが誰かを助けることを願っています。

0
Gh111