How to put a default value to angular select?

Question

Problem:

In my angular application, I am using HTML select. I want to put a default value to my select. This is my code looks.

<div class="form-group" >
              <label>Receiver :</label>
              <div class="input-group input-group-alternative mb-3">
                <select class="custom-select" id="agent" formControlName="userid" *ngIf="!type"  >
                    <option value="0" [selected]="0">Select Reciver</option>
                  <option *ngFor="let agent of agents" [ngValue]="agent.agentId">{{agent.firstName}} {{agent.lastName}}-
                    {{agent.area}}</option>
                </select>
                <select class="custom-select" id="agent" formControlName="userid" *ngIf="type" [value]='0' >
                    <option value="0">Select Reciver</option>
                    <option *ngFor="let farmer of farmers" [ngValue]="farmer.farmerId">{{farmer.firstName}} {{farmer.lastName}}</option>
                  </select>
              </div>
            </div>

I tried almost all the answers in this particular question.

Select default option value from typescript angular 6

But it seems nothing to work. Can someone help me to solve this problem? Thank you

Daniel · Accepted Answer · 2020-04-24T03:59:22.970

As you are using Reactive Forms (because I see you have formControlName="userid" in there), then you can set the default when you create the "userid" control like so:

myForm = this.fb.group({
  userid: ['default_value']
})

If you instead used the FormControl constructor, then the first argument is the default value:

userid = new FormControl('default_value');

Take a look at the docs for Reactive forms here.

How to put a default value to angular select?

1 Answers1