如何动态填充FormGroup？

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="formGroup">
      <div formArrayName="dynamicControls">
        <div *ngFor="let control of dynamicControls.controls; let i = index">
          <input [formControlName]="i" [placeholder]="'Control ' + i">
          <button (click)="removeControl(i)">Remove</button>
        </div>
      </div>
      <button (click)="addControl()">Add Control</button>
    </form>
  `,
})
export class DynamicFormComponent {
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      dynamicControls: this.formBuilder.array([]),
    });
  }

  get dynamicControls() {
    return this.formGroup.get('dynamicControls') as FormArray;
  }

  addControl() {
    const control = new FormControl();
    this.dynamicControls.push(control);
  }

  removeControl(index: number) {
    this.dynamicControls.removeAt(index);
  }
}