Question

在这种情况下，我正在显示数据库获取的一些数据，在图像中您可以看到一些输入字段。尝试为输入字段输入一些值时，键入输入字段时出现问题（输入字段聚焦已禁用）。请帮助我解决问题。

这是我的代码：（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>

这是类型脚本

 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

就像您将新控件推送到窗体而不是formArray上一样，请尝试此操作。

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

Answer 2

问题在于，每次更改表单值时，表单值的引用也会更改，并且对ngFor项进行角度重绘，因此失去了焦点

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

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

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

和component.ts

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

将grnGroup.controls.credentials?.value替换为grnGroup.get('credentials').controls

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

这是控制台日志的简单示例，我已复制了我所说的内容，请检查链接

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

使用FormArray将数据显示到表中

2 个答案: