unable to set default selected options in dropdownbox

Question

How can I set the default value as 'I am interested in', in the dropdown box. Here`s the code. I tried to remove name property also, but that`s not a good solution.

<div class="form-group">
  <select (blur) = "validateTopic(topic.value)" (change)="validateTopic(topic.value)" class="custom-select form-control" #topic="ngModel" [class.is-invalid]="topic.invalid && topic.touched" name="topic" [(ngModel)]="userModel.topic" required [value]="'I am interested in'">
    <option value='default' selected>I am interested in </option>
    <option *ngFor="let sub of topics">{{sub}}</option>
  </select>
  <small class="text-danger" [class.d-none]="!topicHasError && topic.touched">Please choose a topic</small>
</div>

Nothing is selected by default in the dropdown box.

value='default' refers to option value. So change **[value]='default'** — Sameer, Dec 04 '18 at 05:40
didn`t worked. Had tried it earlier. When the page loads, I still do not get any option selected. — , Dec 04 '18 at 05:42

score 0 · Answer 1 · answered Dec 04 '18 at 05:43

 <div class="form-group">
  <select (blur) = "validateTopic(topic.value)" (change)="validateTopic(topic.value)" class="custom-select form-control" #topic="ngModel" [class.is-invalid]="topic.invalid && topic.touched" name="topic" [(ngModel)]="userModel.topic" required [value]="'default'">
    <option value='default' selected>I am interested in </option>
    <option *ngFor="let sub of topics" [value]="sub">{{sub}}</option>
  </select>
  <small class="text-danger" [class.d-none]="!topicHasError && topic.touched">Please choose a topic</small>
</div>

unable to set default selected options in dropdownbox

1 Answers1