Question

我正在尝试创建一个音乐会中播放曲目的表，但是在每一行中我都有相同的输入。另外，如果我向数组添加一行，它们将变为空。我发现我应该使用类似formGroupName="{{i}}"的名称，但是它需要在ts文件中进行硬编码。如何正确制作？

我的项目：https://stackblitz.com/edit/angular-kmjtp4

Answer 1

从代码中我可以发现，您的问题在这里吗？

        <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>

这里显示的表单的定义是这样的：

this.repForm = this.fb.group({
  title: ['', Validators.required],
  composer: ['', Validators.required]
});

上面的表单结构只能容纳一组值。您需要改为将此结构定义为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: ''
    });
  }

并以如下方式在HTML中进行访问：

<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>

您可以在此处找到完整的工作示例：https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final

使用ngFor和ngModel创建表格形式

1 个答案: