Angular2 auto select dropdown option if condition

Question

I have an template, where a service populates the values used in a select box. Like so:

<div class="form-group">
    <label for="backings_select">Backing</label>
    <select class="form-control"
            required
            name="backings_select"
            (ngModelChange)="storeValueRedux($event, count)">
    <option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
    </select>
</div>

The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)

So for a basic, hacky proof of concept I tried:

<div *ngIf="backings?.length == 1" class="form-group">
    <label for="backings_select">Backing Single</label>
    <select class="form-control"
            required
            name="backings_select"
            (ngModelChange)="storeValueRedux($event, count)">


    <option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option>
    </select>
</div>

<div *ngIf="backings?.length > 1" class="form-group">
    <label for="backings_select">Backing Multiple</label>
    <select class="form-control"
            required
            name="backings_select"
            (ngModelChange)="storeValueRedux($event, count)">
    <option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
    </select>
</div>

Now if backings.length == 1, the following html is rendered:

<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option>

And if backings.length > 1 the following html is rendered:

<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option>
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option>

Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?

El houcine bougarfaoui · Accepted Answer · 2017-03-14 15:01:23Z

1

use [selected] instead of selected

<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>

without using ngIf and duplicating your code you can achieve the desired result like this:

<div class="form-group">
    <label for="backings_select">Backing</label>
    <select class="form-control"
            required
            name="backings_select"
            (ngModelChange)="storeValueRedux($event, count)">
         <option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
{{backing.name}}</option>
    </select>
</div>

edited Mar 14, 2017 at 15:01

answered Mar 14, 2017 at 14:55

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

crooksey Over a year ago

Thanks, this works. But it introduces a new problem, if there is only one value, it auto selects the value, but this does not invoke ngModelChange, is there anyway around this?

El houcine bougarfaoui Over a year ago

I think you should add a disabled option that must be auto selected, and force the user to select another option

crooksey Over a year ago

With this application in particular, I want to trigger ngModelChange automatically if only one instance of the array exists, as even though the option is being auto selected, the Model is still changing, and should still fire the event (but it doesn't, even though the model has changed) Is there no way I can do this?

El houcine bougarfaoui Over a year ago

sorry I don't know

Collectives™ on Stack Overflow

Angular2 auto select dropdown option if condition

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related