如何让由* ngFor生成的每个输入都拥有自己的表单控件

你可以通过在ngFor循环中创建一个FormArray来为每个输入创建一个独立的表单控件。

以下是一个示例代码：

在组件类中创建一个表单组：

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

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

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      inputs: this.fb.array([])
    });
  }

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

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

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

  submit() {
    console.log(this.form.value);
  }
}

在模板中使用ngFor循环生成输入和移除按钮：

<form [formGroup]="form" (ngSubmit)="submit()">
  
  <div formArrayName="inputs">
    <div *ngFor="let input of inputs.controls; let i = index">
      <input [formControlName]="i" placeholder="Input {{i + 1}}">
      <button type="button" (click)="removeInput(i)">Remove</button>
    </div>
  </div>
  
  <button type="button" (click)="addInput()">Add Input</button>
  <button type="submit">Submit</button>
  
</form>

在此示例中，我们使用FormBuilder来创建表单组并在表单组内创建一个FormArray来表示输入列表。在模板中，我们使用formArrayName指令将FormArray绑定到输入div，并使用ngFor循环遍历FormArray中的每个控件。我们还添加了一个添加和移除按钮，以便动态添加和删除输入。