Angular2 反应式表单：将 FormArray 与父 FormGroup 同步

### Angular2 反应式表单：将 FormArray 与父 FormGroup 同步

typescript
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
  selector: 'app-task-list',
  template: `
    
      
        
          
          Remove
        
      
      Add Task
      Submit
    
  `
})
export class TaskListComponent {
  taskForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.taskForm = this.fb.group({
      tasks: this.fb.array([])
    });
  }
  get taskControls() {
    return (this.taskForm.get('tasks') as FormArray);
  }
  addTask() {
    const newTaskControl = this.fb.control('');
    this.taskControls.push(newTaskControl);
  }
  removeTask(index: number) {
    this.taskControls.removeAt(index);
  }
  onSubmit() {
    // Handle form submission
  }
}

typescript
// 在添加或删除控件后手动更新表单状态
addTask() {
  const newTaskControl = this.fb.control('');
  this.taskControls.push(newTaskControl);
  this.taskForm.updateValueAndValidity();
}
removeTask(index: number) {
  this.taskControls.removeAt(index);
  this.taskForm.updateValueAndValidity();
}