Angular option with ngModel does not display default option when paired with the value property

Question

I have a list of types in my component.ts as followed.

  public type: string;
  types:Array<Object> = [
      {name: "Category", value: "c"},
      {name: "Cuisine", value: "a"},
      {name: "Main Ingredient", value: "i"},
  ];

And here is the corresponding HTML code.

<select class="form-control" id="queryTypeSelect" [(ngModel)]="type" name="queryTypeSelectForm"> 
    <option *ngFor="let typ of types" [value]="typ.value">{{ typ.name }}</option>
</select>

In the constructor, I have initialized "type" like this:

  constructor(
    private recipeService: RecipeService, 
    private apiService: ApiService) { 
      this.type = this.types[0]["name"];

  }

But when loading the page, the select bar shows nothing, until I manually select something. Although when selecting, the default item shows as checked (the first entry).

Why is this happening? When I remove the value property from the option, it shows the default entry alright. But I need to have the value property.

What is going wrong here? Any kind of help would be appreciated.

nrausch · Accepted Answer · 2020-10-06 09:09:57Z

1

In your constructor, you should use this.type = this.types[0]["value"];

Angular Forms will compare ther Selects ngModel with each options [value] to select the preselected option.

While you use types[0]["name"], Angular has no chance to match your preselected value with the correct option.

answered Oct 6, 2020 at 9:09

nrausch

1721 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JWP · Accepted Answer · 2020-10-06 10:12:31Z

0

<select class="form-control" id="queryTypeSelect"  name="queryTypeSelectForm"> 
    <option *ngFor="let typ of types"    
            [selected]="typ.name === type"
            [ngValue]="typ.value"
   >{{ typ.name }}</option>
</select>

answered Oct 6, 2020 at 10:12

JWP

6,9853 gold badges59 silver badges77 bronze badges

2 Comments

Shiladitya Bose Over a year ago

If I use this, how do I get the selected value upon form submission?

JWP Over a year ago

put in a ngModel in the select component. dev.to/jwp/angular-validation-using-ngmodel-55gf

Collectives™ on Stack Overflow

Angular option with ngModel does not display default option when paired with the value property

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related