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 · Accepted Answer · 2020-06-26 15:55:24Z

1

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

answered Jun 26, 2020 at 15:55

Sheik Althaf

1,61511 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

artworkjpm Over a year ago

It would be nice to see a FormArray version, although this works, I have another field doing the same to change the price, the code might be neater using FormArray

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related