在这种情况下,我正在显示数据库获取的一些数据,在图像中您可以看到一些输入字段。尝试为输入字段输入一些值时,键入输入字段时出现问题(输入字段聚焦已禁用)。请帮助我解决问题。
这是我的代码:(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
}
答案 0 :(得分:0)
就像您将新控件推送到窗体而不是formArray上一样,请尝试此操作。
this.GRNForms.get('credentials').push(tableData);
答案 1 :(得分:0)
问题在于,每次更改表单值时,表单值的引用也会更改,并且对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"
这是控制台日志的简单示例,我已复制了我所说的内容,请检查链接