Drakyn_
Drakyn_

Reputation: 19

AngularJS : selected option not working in <select><option> WITHOUT ngModel

My problem is when i put a variable in the value attribute of my <option> the selected attibute do not work longer and nothing is showed by default in my combobox

<select class="form-control" id="status" formControlName="status">
   <option value="" selected>-- Placeholder --</option>
   <option value="{{variable1}}">Text 1</option>
   <option value="{{variable2}}">Text 2</option>
   <option value="{{variable3}}">Text 3</option>
</select>

In the las three <options> if value="" all works but when i put a variable or something else inside nothing is default showed i already tried with [selected]="true", with selected="false" on these three <option>. I know we can't use ngModel with it but i haven't this attribute

Anyone know how to solve this and preselect the first <option> on my combobox ?

Upvotes: 0

Views: 490

Answers (1)

Emilien
Emilien

Reputation: 2761

It's working if value in template is set to null. Even without the selected attribute.

<form [formGroup]="form">
  <select class="form-control" id="status" formControlName="status">
    <option [value]="null" selected>-- Placeholder --</option>
    <option [value]="variable1">Text 1</option>
  </select>
</form>
this.form = fb.group({
  status: []
});

Upvotes: 4

Related Questions