FormGroupとFormArrayをいつ使用するのですか？

Question

FormGroup：

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

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

FormArray：

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

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

一方が他方の上に使用すべきですか？

Answer 1

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"、 "setValue"などを使用するよりも、 "push"、 "insert"および "removeAt"を使用してFormControlを呼び出すことができます。FormArrayメソッドは、コントロールがフォームの階層内で適切に追跡されるようにします。

これが役に立ちます。