CODEWITHSUNDEEP
formsangular5html-selectdefault
MLefebvre
MLefebvre

Reputation: 21

Angular 5 default Select Option not getting set

I have a form that has input fields and and some select dropdowns. All the input fields are being populated correctly from the input object, but the dropdowns are not being selected to the correct value, and always have a blank option first.

This is what the template looks like:

<div class="form-group">
    <label for="state">State:</label>
    <select class="form-control formField"  id="state" required [(ngModel)]="user.state" name="state">
        <option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
    </select>
</div>

I cant figure out what I am missing.

user.state is a string that contains a 2-letter state abbreviation. States is an array of US states using 2-letter abbreviation.

Upvotes: 0

Views: 1505

Answers (1)

Justin
Justin

Reputation: 722

The best way I've found is as follows:

<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField"  id="state" required [(ngModel)]="user.state" name="state">
    <option [ngValue]="undefined" disabled selected>Select a State</option>
    <option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>

The disabled attribute does not allow that option to be selected from the dropdown. Hope this helps.

Upvotes: 1

Related Questions