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

11 阅读2分钟

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>