Default selected value in drop down not working

Question

I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown

But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"

HTML IS SHOWN BELOW

<div class="form-group">
                            <label for="bot">Use Case</label>
                            <select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
                                <option value="-1" [selected]="isSelected"> Please Select Use Case </option>
                                <option *ngFor="let uc of useCaseList"  [value]="uc.BOTId"> {{uc.BOTName}}
                                </option>
                            </select>
                        </div>
                    </div>

*HTML i CHANGED TO *

[selected]="1"

But it doesn't made any difference.See the changed HTML Below

 <div class="form-group">
                                <label for="bot">Use Case</label>
                                <select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
                                                                            <option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
                                    </option>
                                </select>
                            </div>
                        </div>

SAME IN IMAGE

I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:

But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"

TS file

 ngOnInit() {
  getUsecaseList() {
      this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);

  }
}

Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?

Can you add the function where you initialize your formGroup? — dAxx_, Jul 23 '18 at 13:32
Possible duplicate of [How to have a default option in Angular.js select box](https://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-angular-js-select-box) — Alex, Jul 23 '18 at 13:33

score 1 · Accepted Answer · answered Jul 23 '18 at 13:33

1

Remove [selected] from your options.

The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.

answered Jul 23 '18 at 13:33

Bert Maurau

979
5
21

1

thank you this.scheduleModel.UsecaseId = 1; worked , since you given the first hint i am acepting this – SmartestVEGA Jul 23 '18 at 13:41

score 1 · Answer 2 · answered Jul 23 '18 at 13:35

1

I didn't see you using the instruction that makes it default:

value='default'

for instance:

<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>

answered Jul 23 '18 at 13:35

Vin Aeoua

11
4

i did this , but not worked – SmartestVEGA Jul 23 '18 at 13:38
But as I said, I don't see the value='default' statement on your html. value='default' must be exactly written like this – Vin Aeoua Jul 23 '18 at 17:34
Try – Vin Aeoua Jul 23 '18 at 17:38

score 1 · Answer 3 · answered Jul 23 '18 at 13:39

1

Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().

answered Jul 23 '18 at 13:39

Ramesh Rajendran

37,412
45
153
234

thank you it works , since your answer comes second, i am accepting the other answer... thanks a lot – SmartestVEGA Jul 23 '18 at 13:42
No Prob :) glad to help :) – Ramesh Rajendran Jul 23 '18 at 13:42

Default selected value in drop down not working

3 Answers3