Angular学习笔记24：Angular 响应式表单 FormArray 与 FormGroup 相互嵌套

Angular 响应式表单 FormArray 与 FormGroup 相互嵌套

在类文件中（组件的TS文件）：

声明一个Form表单：

javascript 复制代码

 public validateForm: FormGroup;

在构造方法中：

javascript 复制代码

  private fb: FormBuild;

声明一个FormBuild的对象

在构造方法中：

javascript 复制代码

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 方法

javascript 复制代码

 get addressFormArray(){
        return this.validateForm.controls['address'] as FormArray;
    }

这个时候，在组件中就会生成一个变量：addressFormArray；

当想对表单中的address中的控件进行操作，可以直接对变量：addressFormArray进行操作；

1.对validateForm中的address增加一对新的 street 和 country 有两种方法：

a.使用变量addressFormArray,具体如下：

javascript 复制代码

  this.addressFormArray.push(
            new FormGroup({
                street : new FormControl(null),
                country: new FormControl(null),
            }),
        )

b.直接对validateForm进行操作

javascript 复制代码

 (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，具体如下：

javascript 复制代码

  this.addressFormArray.removAt(需要删除元素的下标)

b.直接对validateForm进行操作，具体如下：

javascript 复制代码

 (this.validateForm.controls['address'] as FormArray).removeAt(需要删除的数组的下标)

3.在模版文件中如何显示

javascript 复制代码

<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>