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

Question

I'm trying to build a 'edit in place' input form , to change the name of a product when the user clicks on the field. My problem is the name field in question is printed out using a ngFor loop and I don't know how many there will be, it will be different for each user. Is there a way to dynamically change the nameField and then refer to the dynamic name in the form? I guess something like: nameField1, nameField2 etc etc, but made using loop from the ngFor="let item of 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;
  }
}

I've seen formArray with FormGroup builder in Angular but I'm finding it hard to understand and I'm not sure if its what I need.

Sheik Althaf Sheik Althaf · Accepted Answer · 2020-06-26T15:55:24

You can edit the name with index value so that you track which index name is getting edited. Because only way to track the edit input by index value.

If you want FormArray example i can provide you if below solution won't work for you

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

Then make changes in ts file

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

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

1 Answers