When clicking on the edit button, data is loaded into the form using [(ng-model)], however, it seems to be working correctly only for some fields and not all fields. The data is displayed in only a few fields despite receiving data for all fields. Below is the HTML code of the form where ng model is being implemented.
<form id="cardForm{{i+1}}">
<div class="row row-custom mt-5">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" autocomplete="off" placeholder="Account Nickname" [(ngModel)]="cardByIds[i].name" [ngModelOptions]="{standalone: true}" >
<div class="font-red" *ngIf="(f.name.touched || f.name.dirty) && f.name.errors">
{{getValidationErrors(f.name.errors)}}
</div>
</div>
</div>
.... (remaining HTML code)
In the TypeScript file, the method `editCardById(card?.id,i)` is called when the edit button is clicked, which takes the card ID and index value to display a form.
getCardById(cardId,index) {
this._transactionService.getCardById(cardId).subscribe((response) => {
if (!this._commonService.isEmptyObject(response)) {
this.cardByIds[index].other = new Other();
... (assigning values to various properties)
}
Here is a screenshot showing how the UI displays the values received from the API but does not bind with ng model https://i.sstatic.net/8ZoRJ.png