如何在Angular中处理数量不确定的输入FormControls？

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div formArrayName="inputs">
        <div *ngFor="let input of inputs.controls; let i = index">
          <input [formControlName]="i">
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class FormComponent {
  myForm: FormGroup;

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

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

  onSubmit() {
    // 处理表单提交逻辑
  }
}

@Component({
  // ...
})
export class FormComponent {
  // ...

  addInput() {
    this.inputs.push(this.formBuilder.control(''));
  }

  removeInput(index: number) {
    this.inputs.removeAt(index);
  }
}

<button (click)="addInput()">Add Input</button>
<button *ngFor="let input of inputs.controls; let i = index" (click)="removeInput(i)">Remove Input {{ i }}</button>