Display data in to table by using FormArray

Question

In this case, I am displaying some data from getting by the DB, in the image you can see some input fields. When I try to input some value for the input field, there have an issue when I typing the input field(Input field focusing is disabling).please help me to solve the issue.

Here is my code:(html)

    <table class="table table-striped table-hover table-bordered table-sm" id="mytable">
                        <thead>
                            <tr>
                                <th style="text-align: center;" scope="col">
                                    Item Id
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Item Name
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Quantity
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Buying Price Rs:
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Amount Rs:
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Status
                                </th>
                                <th style="text-align: center;" scope="col">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr formArrayName="credentials"
                                *ngFor="let creds of grnGroup.controls.credentials?.value; let i = index">
                                <td style="text-align: center;" [formGroupName]="i">
                                    <b>{{creds.itemId }} </b>
                                </td>
                                <td style="text-align: center;" [formGroupName]="i">
                                    <b>{{ creds.itemName }}</b>
                                </td>
                                <td style="text-align: center;" [formGroupName]="i">
                                    <b>{{ creds.qty }}</b>
                                </td>
                                <td style="text-align: center;" [formGroupName]="i">
                                    <!-- <div class="input-group-prepend">
                                                    <div class="input-group-text"><b>Rs:</b></div>
                                                  </div> -->
                                        <input type="text" formControlName ="price" class="form-control" size="5"/>
                                </td>
                                <td style="text-align: center;" [formGroupName]="i">
                                    <b>{{ creds.amount }}</b>
                                </td>
                                <td [formGroupName]="i" *ngIf="'Pending' == creds.status"
                                    style="color:Gold; text-align: center; ">
                                    <i class="fa fa-spinner" aria-hidden="true"></i>
                                </td>
                                <td [formGroupName]="i" *ngIf="'Approved' == creds.status"
                                    style="color:green; text-align: center; ">
                                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                </td>
                                <td style="text-align: center;" [formGroupName]="i">
                                    <button type="button" class="btn btn-success btn-sm"
                                        (click)="pushValue(creds[i])">
                                        <i class="fa fa-check" aria-hidden="true"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Here is the type script

 ngOnInit() {
this.grnGroup = this.formBuilder.group({
    credentials: this.formBuilder.array([]),
}) }

 const tableData = this.formBuilder.group({
                        itemId:[itemId] , itemName:[itemName] ,qty:[qty] , amount:[amount] ,status: [this.array[i].status] ,price:['']
                    });

   this.GRNForms.push(tableData);

  get phoneForms() {
        return this.grnGroup.get('credentials') as FormArray
      }

Answer 1

the problem is that every time on form value changes, the reference of form value changes too, and angular redrawing the ngFor items and therefore the focus is lost

you can prevent this in two ways

1. you can add trackBy: onTrackById on *ngFor

*ngFor="let creds of grnGroup.controls.credentials?.value; trackBy: onTrackById; let i = index"

and in component.ts

onTrackById(index: number, item: FormGroup) {
   return index; // or unique value from {item} something like this (item.get('id').value)
}

2. replace grnGroup.controls.credentials?.value with grnGroup.get('credentials').controls

*ngFor="let creds of grnGroup.controls.credentials?.controls; trackBy: onTrackById; let i = index"

here is the simple example with console logs, I have reproduced what i said, Please check the link

https://stackblitz.com/edit/form-array-angular-rdg8dd

Answer 2

Looks like your pushing the new control on the form not the formArray, try this.

this.GRNForms.get('credentials').push(tableData);