Angular select option with selected attribute not working

9
votes

Using Angular 4, I have a html template and I want a selection box with two options. One of those options should be pre-selected by default.

<select name="rate" #rate="ngModel" ngModel required>
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

Details:

I assign #rate="ngModel" so that I can reference the value somewhere else in the template, in a conditional statement or with interpolation {{rate.value}}. For that to work I simply add ngModel to the tag. I'm not binding to anything in the component class as this control is only used to provide it's value to another control in the same template.

Issue:

In Chrome, and Microsoft Edge, the box is empty, no default value selected. If I get rid of #rate="ngModel" ngModel it works. However, I need the reference to rate.value.

I tried various combinations of ngValue, value, [ngValue], [value], but I'm not trying to bind the value to a model and I'm not using a ngFor loop. There is no further styling on the select box either.

2
angularhtml-selectangular2-ngmodel
Doesn't just <select [(ngModel)]="rate" required > work? - Vega
@Vega, It's not a two-way binding so the [()] syntax shouldn't be used in this case. I believe. - slanden
This didn't work and I need the template variable #rate="ngModel" so that I can reference this elsewhere in the template form. I'm also not trying to call an event. I've edited the details of my post to hopefully better describe the use case. - slanden
That looks like what I'm trying to accomplish, and it does start with the option selected. But, after trying that link and trying it in my code I noticed that {{rate.value}} doesn't update. - slanden
That's kind of normal as there is no two way binding, but it's updated. Check the updated demo - Vega

2 Answers

9
votes

When you use ngModel, the state is handled internally and any explicit change to it just gets ignored. In your example, you are setting the selected property of option, but you are also providing a (void) ngModel to your select, so Angular expects that the state of the select is provided within the ngModel.

Briefly, you should leverage on your ngModel instead than setting the selected property:

<select 
    name="rate" 
    #rate="ngModel" 
    [(ngModel)]="yourModelName" 
    required>
    <option value="hr">hr</option>
    <option value="yr">yr</option>
</select>

And:

  yourModelName: string;
  constructor() {
    this.yourModelName = 'hr';
  }
3
votes

If you don't wish to have a two-way binding, you can set ngModel to the 'default' value and with the template local variable get the selected value:

<select #rate ngModel="hr">
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

<p *ngIf="rate.value == 'hr'">hr</p> 
<p *ngIf="rate.value == 'yr'">yr</p>

{{rate.value}}

DEMO