How to implement a select list correctly?

Question

How can I implement a selection list using these three models? I do so:

html:

<ng-container [(ngModel)]='user.id' name="id" >
  <select *ngFor="let userRole of userRoles" required>
    <option *ngFor="let role of roles" [ngValue]="role.role_id">
      {{role.name}}
    </option>
  </select>
</ng-container>

But in the end get a duplicate of the "select" component. And I get this error:

ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'id' Error: No value accessor for form control with name: 'id'

Answer 1

Let's start with your model.

export class User {
  constructor(
    public id: number,
    public role: Role,
  ) {}
}

export class Role {
  constructor(
    public id: number,
    public label: string,
  ) {}
}

Now with your select.

<select [(ngModel)]="user.roles">
  <option *ngFor="let role of roles" [ngValue]="role"> {{ role.label }} </option>
</select>

Which gives as a result, this stackblitz