Angular select option with selected attribute not working

Question

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.

@Vega, It's not a two-way binding so the [()] syntax shouldn't be used in this case. I believe. — slanden, Oct 13 '17 at 19:56
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, Oct 13 '17 at 20:27
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, Oct 13 '17 at 20:34
That's kind of normal as there is no two way binding, but it's updated. Check the updated demo — Vega, Oct 13 '17 at 20:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156705/discussion-between-slanden-and-vega). — slanden, Oct 13 '17 at 20:51

Christian Vincenzo Traina · Answer 1 · 2022-02-18T22:41:17.847

18

When you use ngModel, the state is handled internally and any explicit change applied to the attributes 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 rather 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';
  }

edited Feb 18 '22 at 22:41

answered Oct 13 '17 at 19:13

Christian Vincenzo Traina

9,546
2
40
63

what is log(rate)? is that just an example of a custom function? Please note, I'm not binding to any variable in the component class and the select box is only there so that a user can choose a value so I can use that value in logic somewhere else in the template. – slanden Oct 13 '17 at 20:31
No, it was just a row that I added for testing purpose and I forgot to delete. I copied and pasted it for mistake – Christian Vincenzo Traina Oct 13 '17 at 20:36
Anyways you need to bind a reference in the component in order to preselect a value. This is how ngModel works – Christian Vincenzo Traina Oct 13 '17 at 20:38

score 9 · Accepted Answer · answered Oct 13 '17 at 21:57

9

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

answered Oct 13 '17 at 21:57

Vega

27,856
27
95
103

1

Thank You! I'd been reading through other ways of doing this and they just weren't working. The docs for Angular 5 pipes show it as [(ngModel)]='rate' which would work if I were populating the options dynamically and all of the stuff that comes with that. But for only two or three hard coded options this works. And it is so simpler conceptually. This is something so basic and simple I was surprised at the convoluted suggestions/fixes. – Bob Ramsey Nov 07 '17 at 17:22
1

Be careful, this is now deprecated with v7 if you are using reactive forms: https://angular.io/api/forms/FormControlName#use-with-ngmodel – rynop Feb 13 '19 at 16:06
@rynop, no, even with previous versions, it's better to not mix reactive forms and ngModel. But the OP doesn't use it anyway and my exemple either :) – Vega Feb 13 '19 at 16:33

score 0 · Answer 3 · answered Aug 19 '22 at 06:21

0

In case you are using Reactive form, setting up default value while you define your form model could also help.

answered Aug 19 '22 at 06:21

Bhavesh

74
7

Angular select option with selected attribute not working

Details:

Issue:

3 Answers3