CODEWITHSUNDEEP
javascripthtmlangulardrop-down-menu
chuckd
chuckd

Reputation: 14520

Can't get 1st item to reset in a html select using angular

My drop down works fine when I initially open it up inside a modal window. If I change the select to some selection drop value then close the modal and reopen, it stays the same. It doesn't reset it to 'None selected'

Here is what I'm doing

// in my ts file when I open the modal
this.geModal.state = '';
<select class="form-control" name="prState">
                <option [selected]="geModal.state == ''">None selected</option>
                <option *ngFor="let state of stateList"
                [value]="state.code" [selected]="geModal.state == state.code">
                    {{state.name}}
                </option>
            </select>

Upvotes: 0

Views: 37

Answers (1)

xsh.7
xsh.7

Reputation: 6250

You should not mix [selected] with [ngModel], don't use a default value for state and set value="undefined" for the default option:

<select class="form-control" [(ngModel)]="geModal.state" name="prState">
  <option value="undefined">None selected</option>
  <option *ngFor="let state of stateList" [value]="state.code">{{state.name}}</option>
</select>

Upvotes: 2

Related Questions