A FormGroupはキーとして各コントロール名と、1つのオブジェクトに各子FormControlの値を集約します。
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew')
});
A FormArrayは配列に各子FormControlの値を集約します。
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の「addControl」、「removeControl」、「setValue」などを使用するよりも「push」、「insert」、「removeAt」を使用してFormControlを操作する方が簡単であるという意味で、FormGroupよりも柔軟性があります。FormArrayメソッドは、コントロールがフォームの階層で適切に追跡されます。
お役に立てれば。
リアクティブフォームを作成するには、親FormGroupが必須です。これにFormGroupはさらにformControls、子formGroupsまたはを含めることができますformArray
FormArrayformControlsまたはformGroupそれ自体の配列をさらに含めることができます。
いつformArrayを使用する必要がありますか？
の使用法を説明するこの美しい投稿を読んでください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),
})
)
}))
})
このデモで遊ぶことを忘れないでください、そして旅行のためのcitiesそしてplaces旅行のための配列の使用法に注意してください。
角度のあるドキュメントから、それを見ることができます
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。
これは私がそれを理解する方法です、それが誰かを助けることを願っています。