在angular 2 reactive forms中动态删除表单控件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.myForm = new FormGroup({
      formControls: new FormArray([])
    });
  }

  get formControls() {
    return this.myForm.get('formControls') as FormArray;
  }

  addFormControl() {
    this.formControls.push(new FormControl());
  }

  removeFormControl(index: number) {
    this.formControls.removeAt(index);
  }
}

<form [formGroup]="myForm">
  <div formArrayName="formControls">
    <div *ngFor="let control of formControls.controls; let i = index">
      <input [formControlName]="i">
      <button (click)="removeFormControl(i)">删除</button>
    </div>
  </div>
</form>
<button (click)="addFormControl()">添加表单控件</button>