表格组:
A 表格组将每个子 FormControl 的值聚合为一个
对象，以每个控件名称作为键。
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew')
});
表格数组:
A 表格数组将每个子 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 提供了更大的灵活性，因为使用“push”、“insert”和“removeAt”比使用 FormGroup 的“addControl”、“removeControl”、“setValue”等操作 FormControl 更容易。FormArray 方法确保控件在表单的层次结构中正确跟踪。
希望这可以帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
