Angular Select Option With Selected Attribute Not Working


Answer :

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';   } 

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


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable