在formarray angular中动态添加和删除formgroup

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, 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(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      formArray: this.formBuilder.array([])
    });
  }
}

<form [formGroup]="myForm">
  <div formArrayName="formArray">
    <div *ngFor="let formGroup of myForm.get('formArray').controls; let i = index">
      <div [formGroupName]="i">
        <!-- 表单控件 -->
        <input formControlName="name" placeholder="Name">
        <input formControlName="email" placeholder="Email">
        <!-- 删除按钮 -->
        <button (click)="removeFormGroup(i)">Remove</button>
      </div>
    </div>
  </div>
  <!-- 添加按钮 -->
  <button (click)="addFormGroup()">Add</button>
</form>

export class MyFormComponent implements OnInit {
  // ...

  addFormGroup() {
    const formArray = this.myForm.get('formArray') as FormArray;
    formArray.push(this.formBuilder.group({
      name: '',
      email: ''
    }));
  }

  removeFormGroup(index: number) {
    const formArray = this.myForm.get('formArray') as FormArray;
    formArray.removeAt(index);
  }
}