从 ngFor 循环的索引生成的 formControl 名称，创建动态表单

Question

我正在尝试构建一个 'edit in place' 输入表单，以便在用户单击该字段时更改产品名称。我的问题是有问题的名称字段是使用 ngFor 循环打印出来的，我不知道会有多少，每个用户都会有所不同。有没有办法动态更改 nameField 然后在表单中引用动态名称？我猜是这样的：nameField1、nameField2 等等，但是使用来自 ngFor="让 crudService.subscriptions.subscriptions

项

html:

<tr *ngFor="let item of crudService.subscriptions.subscriptions; index as i">
    <td>
      <div *ngIf="!showEditName">
        <div>
          {{ item.productName }}
        </div>
        <div>
          <button class="btn-sc btn-blac" (click)="editName(item.productName, i)">Edit</button>
        </div>
      </div>

      <div class="col" *ngIf="showEditName">
        <div class="md-form">
          <input mdbInput mdbValidate type="text" class="form-control" [formControl]="nameField" />
          <label for="editName">EditName</label>
        </div>
        <div>
          <button class="btn-sc btn-blac" (click)="editName()">save</button>
          <button class="btn-sc btn-blac" (click)="editName()">cancel</button>
        </div>
      </div>
    </td>
</tr>

component.ts:

import { FormControl } from "@angular/forms";

export class SubscriptionsComponent implements OnInit {

nameField = new FormControl("");
showEditName: boolean = false;

  editName(itemName: string, subIndex: number) {
    console.log(subIndex);
    this.nameField.setValue(itemName);
    this.showEditName = !this.showEditName;
  }
}

我在 Angular 中见过 formArray 和 FormGroup 生成器，但我发现它很难理解，我不确定它是否是我需要的。

Answer 1

您可以编辑带有索引值的名称，以便跟踪正在编辑的索引名称。因为只能通过索引值来跟踪编辑输入。

如果您需要 FormArray 示例，如果以下解决方案不适合您，我可以为您提供

<tr *ngFor="let item of crudService.subscriptions.subscriptions; index as i">
<td>
  <div *ngIf="indexToEdit != i"> // make sure to track by index
    <div>
      {{ item.productName }}
    </div>
    <div>
      <button class="btn-sc btn-blac" (click)="editName(item.productName, i)">Edit</button>
    </div>
  </div>

  <div class="col" *ngIf="indexToEdit == i">
    <div class="md-form">
      <input mdbInput mdbValidate type="text" class="form-control" [formControl]="nameField" />
      <label for="editName">EditName</label>
    </div>
    <div>
      <button class="btn-sc btn-blac" (click)="editName()">save</button>
      <button class="btn-sc btn-blac" (click)="editName()">cancel</button>
    </div>
  </div>
</td>

然后修改ts文件

import { FormControl } from "@angular/forms";

export class SubscriptionsComponent implements OnInit {

 nameField = new FormControl("");
 indexToEdit: number = null;

 editName(itemName: string, subIndex: number) {
   console.log(subIndex);
   this.nameField.setValue(itemName);
   this.indexToEdit = subIndex; // set index value and reset it after name edited
 }
}

从 ngFor 循环的索引生成的 formControl 名称，创建动态表单

formControl name generated from index of ngFor loop, create dynamic form

angular

angular-reactive-forms

formarray