Angular 使用ngFor和ngModel创建表格表单

我试图创建一个演唱会播放曲目的表格，但在每一行我都得到了相同的输入。此外，如果我向数组中添加一行，它们将变为空。我发现我应该使用类似

formGroupName=“{{I}}”

的东西，但它需要在ts文件中对它们进行硬编码。如何正确制作

---

我的项目：

从代码中我可以看出，您的问题在这里

        <tr *ngFor="let a of repertoire;let i = index;trackBy:trackByIndex;">
          <th scope="row">{{a.id}}</th>
          <td><input type="text" formControlName="title" [(ngModel)]="repertoire[i].title"></td>
          <td><input type="text" formControlName="composer" [(ngModel)]="repertoire[i].composer"></td>
          <td><button type="button" class="btn btn-danger btn-sm" (click)="deleteMusic(a)">Usuń</button></td>
        </tr>

上面的表单结构只能保存一组值。您需要将此结构定义为FormArray

我在这里用一组地址做了类似的事情：

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  addresses: this.fb.array([this.buildAddress()])
});

请注意，我将其定义为FormBuilder数组

然后我向该数组添加如下内容：

  addAddress(): void {
    this.addresses.push(this.buildAddress());
  }

  buildAddress(): FormGroup {
    return this.fb.group({
      addressType: 'home',
      street1: ['', Validators.required],
      street2: '',
      city: '',
      state: '',
      zip: ''
    });
  }

<div formArrayName="addresses"
     *ngFor="let address of addresses.controls; let i=index">

  <div [formGroupName]="i">
    <div class="form-group row mb-2">
      <label class="col-md-2 col-form-label"
             attr.for="{{'street1Id' + i}}">Street Address 1</label>
      <div class="col-md-8">
        <input class="form-control"
               id="{{'street1Id' + i}}"
               type="text"
               formControlName="street1">
      </div>
    </div>
    <!-- More here -->
  </div>

并在HTML中访问它，如下所示：

  addAddress(): void {
    this.addresses.push(this.buildAddress());
  }

  buildAddress(): FormGroup {
    return this.fb.group({
      addressType: 'home',
      street1: ['', Validators.required],
      street2: '',
      city: '',
      state: '',
      zip: ''
    });
  }

<div formArrayName="addresses"
     *ngFor="let address of addresses.controls; let i=index">

  <div [formGroupName]="i">
    <div class="form-group row mb-2">
      <label class="col-md-2 col-form-label"
             attr.for="{{'street1Id' + i}}">Street Address 1</label>
      <div class="col-md-8">
        <input class="form-control"
               id="{{'street1Id' + i}}"
               type="text"
               formControlName="street1">
      </div>
    </div>
    <!-- More here -->
  </div>

街道地址1

---

您可以在这里找到一个完整的工作示例：

在这里包含基本部件，而不是粘贴箱。stackoverflow最欢迎使用TackBlitz！如果你把stackblitz中的所有内容都删掉，除了演示问题所需的最低限度之外，这会让我们更容易帮助你。这会让我们更容易提供帮助。