在angular中，如何在FormArray中动态添加不同的FormGroup？

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

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

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      myArray: this.fb.array([])
    });
    this.formArray = this.myForm.get('myArray') as FormArray;
  }
}

<form [formGroup]="myForm">
  <div formArrayName="myArray">
    <div *ngFor="let control of formArray.controls; let i = index">
      <div [formGroupName]="i">
        <input formControlName="name" placeholder="Name">
        <input formControlName="age" placeholder="Age">
        <!-- 其他表单控件 -->
      </div>
    </div>
  </div>
</form>

addFormGroup() {
  const group = this.fb.group({
    name: '',
    age: ''
    // 其他表单控件的初始化
  });
  this.formArray.push(group);
}

<button (click)="addFormGroup()">添加</button>