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

Question

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 ?

Assuming that your FormGroup is form, you can preselect in Typescript like this this.form.get('status').setValue(this.variable1); or in the initialization this.form = this.fb.group({ status: [this.variable1] }); — Emilien
– Emilien, Commented Aug 19, 2021 at 14:18
Yes but it's not my request i just want '-- Placeholder --' written in the combobox at the page loading. It's not a real value because this option is disabled it's just a placeholder text ^^ — Drakyn_
– Drakyn_, Commented Aug 19, 2021 at 14:23

Emilien · Accepted Answer · 2021-08-19 14:28:29Z

4

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: []
});

answered Aug 19, 2021 at 14:28

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

1 Comment

Drakyn_ Over a year ago

It was just that >< ! Thank you !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related