Displaying data retrieved from the database, the image shows some input fields. However, an issue arises when trying to input values as the focus on the input field is disabled. Assistance needed to resolve this problem.
Code Example (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">
<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>
TypeScript Code:
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
}