ngModel displays identical values for different fields

This is an Angular 5 and Firestore project. I am using a form with [(ngModel)] to update a document in the database. The update is successful. But the way [(ngModel)] displays document field values in the input boxes themselves is incorrect, e.g. the placeholders are wrong. Each input box is displaying the same field value, when they should be different. For example

[(ngModel)]

[(ngModel)]

In the db, my doc looks like this

document
field1: document title
field2: google
field3: https://www.google.com


But my input boxes show this

input box 1 displays https://www.google.com

input box 1

https://www.google.com

input box 2 displays https://www.google.com

input box 2

https://www.google.com

input box 3 displays https://www.google.com

input box 3

https://www.google.com

Here is the HTML

<ng-container *ngFor="let x of xyz | async">


update


{{x.field1}} ####
</div>
</ng-container>


Am I missing something in the component.ts?

component.ts

You must give a name to your inputs. And each input must have a different one.
– JB Nizet
Jun 29 at 15:53

Thank you! That was it. If you post an answer I'll mark it as correct.
– John
Jun 29 at 16:04

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.