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);
  }

與上述相同的規則適用於從陣列中刪除特定的表單控制元件