登录Angular学习笔记24：Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
在类文件中（组件的TS文件）：
声明一个Form表单：
public validateForm: FormGroup;
在构造方法中：
private fb: FormBuild;
声明一个FormBuild的对象
在构造方法中：
constructor(private fb: FormBuilder) {
this.validateForm = this.fb.group({
name: [null],
sex : [null],
age : [null],
address: this.fb.array([
new FormGroup({
street : new FormControl(null),
country: new FormControl(null),
}),
]),
});
}这样在组件中就构造出来了一个嵌套了FormArray的FormGroup，
这个时候，需要将validateForm这个表单中address的属性实例成一个FormArray
使用Angular中的get 方法
get addressFormArray(){
return this.validateForm.controls['address'] as FormArray;
}这个时候，在组件中就会生成一个变量：addressFormArray；
当想对表单中的address中的控件进行操作，可以直接对变量：addressFormArray进行操作；
1.对validateForm中的address增加一对新的 street 和 country 有两种方法：
a.使用变量addressFormArray,具体如下：
this.addressFormArray.push(
new FormGroup({
street : new FormControl(null),
country: new FormControl(null),
}),
)
b.直接对validateForm进行操作
(this.validateForm.controls['address'] as FormArray).push(
new FormGroup({
street : new FormControl(null),
country: new FormControl(null),
})
)对validateForm的增加，可以放在一个事件的方法里
2.去掉validateForm中的address对某一对属性的控制，
正常情况下，是可以知道在当前删除的是 street 和 country在address这个数组中的下标，从而可以快速准确的删除，同样，删除也是可以有两种方式：
a.使用变量addressFormArray，具体如下：
this.addressFormArray.removAt(需要删除元素的下标)
b.直接对validateForm进行操作，具体如下：
(this.validateForm.controls['address'] as FormArray).removeAt(需要删除的数组的下标)
3.在模版文件中如何显示
<form [FormGroup]="validateForm">
<div>
...
<!-- 关于直接在FormGroup的部分省略 -->
</div>
<div FormArrayName="adderss">
<div *ngFor="let address of validateForm.controls['address'].controls;let i = index">
<div [formGroupName]="i">
<div>
在这里就可以自己定义address 中FormGroup的内容了，增加关于FormGroup的控件。
</div>
</div>
</div>
</div>
