Best practices for setting up a select dropdown menu?

Question

Best practices for setting up a select dropdown menu?

What is the best way to create a selection list using three different models? Here is my approach:

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>

However, I am encountering an issue where I get a duplicate of the "select" component. This error message pops up:

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'

angular typescript

Answer 1

Answer №1

Let's begin by examining your model.

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

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

Next, let's take a look at your select element.

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

As a result, you can check out the updated stackblitz here.

Answer 2

Let's begin by examining your model.

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

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

Next, let's take a look at your select element.

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

As a result, you can check out the updated stackblitz here.

Best practices for setting up a select dropdown menu?

Answer №1

Similar questions

Search for specific item within an array of objects

When employing class decorators, it is essential to use the Angular2 reflect-metadata shim

The update operation for the Reference object encountered an error: The first argument includes a function within a

Is it possible for a type to include itself within Typescript?

Examining the reasoning behind comparisons within an Ionic view

Create a feature in Angular that allows for the dynamic addition of input fields that are connected to a generic

Issue with Mat Autocomplete not populating input value when utilized with a formControl

Trigger the Modal once the navigation step is completed

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

Tips for narrowing the spacing between bars in a bar graph

Interface of TypeScript Undetermined

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Maintain the initial worth even when making alterations

When triggering my custom Exception in Angular 2, Angular automatically encapsulates it within viewWrappedDebugError

Explore the refined search capabilities within the ng-select dropdown component in Angular

ngRepeat momentarily displays duplicate items in the list

How to extract a value from a BehaviorSubject within an Angular 6 guard

Contrasting importing a module in app.module versus a component

Using async await with Angular's http get

Angular: Assigning initial value to <select> element