Currently, I am in the process of developing an Angular Application and I am encountering a scenario where I need to edit the values within an array. The array is being displayed in a table format and when I click on the edit icon of a particular row, the field value is shown in corresponding input fields located above the table.
The setup looks something like this:
[https://i.sstatic.net/OP85L.png].
However, I have come across an issue where if I make edits but save without actually changing any values, the input fields end up displaying 'undefined' instead of retaining the original value. Here is a snippet of my code:
document.forms[0].serverAlias.value = alias;
document.forms[0].serverHost.value = host;
document.forms[0].netDataAddress.value = netData;
Here are the corresponding input fields:
<div class="col-md-3">
<div class="wrapper-upload item-block ">
<label>Server Alias</label>
<input [(ngModel)]="serverAlias" name="serverAlias" type="text" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="wrapper-upload item-block ">
<label>Server Host</label>
<input [(ngModel)]="serverHost" name="serverHost" type="text" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="wrapper-upload item-block ">
<label>NetData Address</label>
<input [(ngModel)]="netDataAddress" name="netDataAddress" type="text" class="form-control">
</div>
</div>
Through observation, I noticed that clicking on a field before saving the edit ensures that the correct value is sent upon saving.