Auto select value in dropdown

Question

How do I set a value as the default selected value in the dropdown? I am using angular 8. I have the following html

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType"  formControlName="contentType" name="contentType">
          <option   *ngFor="let contentType of contentTypes" [value]="contentType.name" >{{contentType.displayName}}</option>
        </select>
      </div>

I have tried using [selected]="contentType.name=='TEXT'" but the dropdown still does not show the default selected value as "Text Only".

<div class="form-group">
        <label class="form-control-label col-form-label-sm">Content Type</label>
        <select class="form-control form-control-sm" [(ngModel)]="item.contentType" formControlName="contentType" name="contentType">
          <option *ngFor="let contentType of contentTypes" [value]="contentType.name" [selected]="contentType.name=='TEXT'">{{contentType.displayName}}</option>
        </select>
      </div>

contentTypes is an array of [{"name":"TEXT","displayName":"Text Only"},{"name":"AUDIO","displayName":"Audio"},{"name":"VIDEO","displayName":"Video"}]

Can you set default value for item.contentType before you init select? Setting it to "TEXT" might preselect TEXT option — vanrado, Mar 05 '20 at 21:06

vanrado · Accepted Answer · 2020-03-05T21:35:59.160

Karu,

by default item.contentType should being inited with value coresponding with some option from your list of contentTypes. If you init item.contentType with value TEXT for example, option with value TEXT will be preselected by default.

Or, you can just put option with null value with text Select content (for example). And validate it, if it should be required. Something like:

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" [(ngModel)]="item.contentType"
         name="contentType">
      <option [value]="null">Select content</option>
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

Anyway, deside which approach for building form you will use (Reactive forms or Template driven forms). Because you did a mistake in definition for select component. Use only [(ngModel)] definition and remove formControlName="contentType", if you would like to use template driven forms pattern. Study this first in link provided.

score 0 · Answer 2 · answered Mar 05 '20 at 21:15

0

I could make it work by this example

template

<div class="form-group">
   <label class="form-control-label col-form-label-sm">Content Type</label>
   <select class="form-control form-control-sm" formControlName="contentType" 
         name="contentType">
      <option *ngFor="let contentType of contentTypes" [value]="contentType.name"> 
          {{contentType.displayName}}
      </option>
    </select> 
</div>

in ts

// if you will give the value to the contentType control it will be selected item
// something like this 
export class ReleaseComponent implements OnInit {

   ngOnInit() {
      this.yourForm.get('contentType').patchValue('TEXT'); 
      // or
      this.yourForm.get('contentType').patchValue(this.contentTypes[0].name); 
   }
}

I hope this can be helpfull

answered Mar 05 '20 at 21:15

Ashot Aleqsanyan

4,252
1
15
27

It can help when Karu will rewrite approach to Reactive forms pattern. Karu uses Template Driven Form – vanrado Mar 05 '20 at 21:27
he uses both and I have removed the `[ngModel]` from above example – Ashot Aleqsanyan Mar 05 '20 at 21:28
1

Good hint Ashot, I saw only [(ngModel)] definition – vanrado Mar 05 '20 at 21:37
Ashot if you have time, it would be great if you provide example with correct solution for reactive forms pattern. In your answer few things are missing, for example: [formGroup] definition in template and ts file and ofcourse definition for formGroup instance with contentType formControl – vanrado Mar 05 '20 at 21:46

score 0 · Answer 3 · answered Sep 10 '21 at 03:18

Use [selected] in option like this. Your selected condition is wrong, i think

<select class="form-control" [(ngModel)]="item.contentType">
   <option *ngFor="let contentType of contentTypes" [value]="contentType.name" [selected]="contentType.name==item.contentType">{{contentType.displayName}}</option>
</select>

Auto select value in dropdown

3 Answers3