CODEWITHSUNDEEP
angularhtml-selectangular-reactive-formsmultipleselection
barzioni
barzioni

Reputation: 13

Angular reactive form, multiple select option not showing first 'selected disabled' option

I am trying to get my field to work properly on angular 6 reactive form,

The problem is that the first option (the selected disabled option) is not showing as first on initiating (it shows the one from option from the *ngFor's) , I think that the main issue caused from the multiple select option attribute, even thou it not initiating as a multiple select option but as a simple select option (It changes by different input to multiple select option)

here's my code:

  <div class="form-group">
    <label for="cakes" class="sr-only">Select from existing</label>
    <select  formControlName="cakes" name="cakes" [multiple]="form.value.amount > 1" class="form-control">
      <option  value="null" disabled selected>Select {{form.value.amount}}</option>
      <option *ngFor="let cake of cakes" [value]="cake.id">{{cake.name}}</option>
    </select>
  </div>

Upvotes: 0

Views: 759

Answers (1)

Sasan N
Sasan N

Reputation: 97

please set default value of first select option as a "".

like below

<option value="">--- Select ---</option>

Upvotes: 1

Related Questions