CODEWITHSUNDEEP
angular
Om Chaturvedi
Om Chaturvedi

Reputation: 103

Angular2 :"Select" option should be selected and visible by default

Facing issues for select option in angular2.It is not selected and visible by default.It is working in IE browser but not in other browser.

country.html :

<label class="control-label  col-sm-offset-1  col-sm-2 bodySmall" for="country">Country:</label>
                <div class="col-sm-3" [ngClass]="{ 'has-error': country.errors  && (country.dirty || country.touched)}">
                    <select class="form-control bodySmall" id="country" [(ngModel)]="model.country" name="country" #country="ngModel" required>
                        <!--required-->

                        <option value="" selected="selected">--Please select a Country--</option>
                        <option *ngFor="let c of countries" [value]="c">{{c}}</option>
                    </select>
                    <div *ngIf="country.errors && (country.dirty || country.touched)" class="help-block">
                        <div [hidden]="!country.errors.required">Country is required.</div>
                    </div>
                </div>

FYR Please find screenshot

Upvotes: 3

Views: 1036

Answers (2)

playerone
playerone

Reputation: 1127

If you want to set default value use:

<option disabled selected value>-- Please select a Country --</option>

if you have default value loaded in component in selectedCountry on init add:

<option *ngFor="let c of countries" [selected]="selectedCountry  == 'c'" >{{c}}</option>

Upvotes: 0

Tyler Jennings
Tyler Jennings

Reputation: 8911

If you are wanting to have a non-selectable item(user cannot manually select it) preselected by default, then try something like this:

<option disabled hidden [value]="undefined">Please select a Country</option>

The [value]=undefined can make it preselected if you don't populate a valid value. The disabled and hidden make the option not manually selectable by the user.

Upvotes: 4

Related Questions