使用 FormArray 将数据显示到表中 [英] Display data in to table by using FormArray

问题描述

在本例中，我将显示通过数据库获取的一些数据，在图像中您可以看到一些输入字段.当我尝试为输入字段输入一些值时，在输入输入字段时出现问题(输入字段聚焦被禁用).请帮助我解决问题.

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.

这是我的代码:(html)

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>

--><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="'已批准' == 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></td></tr></tbody>

Here is the type script

这里是类型脚本

推荐答案

问题是每次form值改变，form值的引用也会改变，并且angular重绘ngFor项目，因此失去焦点

您可以通过两种方式防止这种情况

you can prevent this in two ways

1. 您可以在 *ngFor
上添加 trackBy: onTrackById

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

并在 component.ts

and in component.ts

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

1. 将 grnGroup.controls.credentials?.value 替换为 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

这篇关于使用 FormArray 将数据显示到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！