Angular 2 数据驱动表单

this.myForm = this.formBuilder.group

使用用户的配置创建一个表单对象,并将其分配给 this.myForm 变量。

'loginCredentials': this.formBuilder.group

method 创建一组控件,由一个 formControlName 组成,例如。login 和 value ['', Validators.required],,其中第一个参数是表单输入的初始值,secons 是验证器或验证器数组,如'email': ['', [Validators.required, customValidator]], 中所示。

'hobbies': this.formBuilder.array

创建一个组数组,其中组的索引是数组中的 formGroupName ,并且访问方式如下:

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
   <div formGroupName="{{i}}">...</div>
</div>
onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('', Validators.required)
    }))
  }

此示例方法将新 formGroup 添加到数组中。当前访问需要指定我们想要访问的控件类型,在此示例中,此类型为:<FormArray>

removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

与上述相同的规则适用于从数组中删除特定的表单控件