Currently working on an Angular 5 and Firestore project, where I have implemented a form using [(ngModel)] to update a document in the database. The update operation is successful, however, there seems to be an issue with how the [(ngModel)] is displaying the document field values in the input boxes. Instead of showing different values in each input box, they all display the same value. For example:
Within the database, the document appears as follows:
document
field1: document title
field2: google
field3: https://www.google.com
But when displayed in the input boxes, it looks like this:
input box 1 displays https://www.google.com
input box 2 displays https://www.google.com
input box 3 displays https://www.google.com
Here is the HTML structure being used:
<ng-container *ngFor="let x of xyz | async">
<div class="columns">
<div class="column">
<form>
<input [(ngModel)]="x.field1" #v1>
<input [(ngModel)]="x.field2" #v2>
<input [(ngModel)]="x.field3" #v3>
<button (click)="update(v1.value, v2.value, v3.value)">update</button>
</form>
</div>
<div class="column">
{{x.field1}} #### <-- THESE WORK FINE
{{x.field2}}
{{x.field3}}
</div>
</div>
</ng-container>
Is there something missing in the component.ts file that I should be aware of?