Angular 2选择不更改ngModel

Question

There are two select, the second depends on the first:

<div class="form-group">
        <label class="col-xs-12 col-sm-2 control-label">Тип ТС:</label>
        <div class="col-xs-12 col-sm-10">
            <select class="form-control " type="text" [(ngModel)]="item.TransportTypeId">
                <option *ngFor='let type of transportTypes' [ngValue]='type.Id' [textContent]='type.Name'></option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-12 col-sm-2 control-label">Подтип ТС:</label>
        <div class="col-xs-12 col-sm-10">
            <select class="form-control " type="text" [(ngModel)]="item.TransportSubTypeId" (ngModelChange)="show()">
                <option [ngValue]="undefined">Не указано</option>
                <option *ngFor="let subType of transportSubTypes | filterBy: ['TransportTypeId']: item.TransportTypeId" [ngValue]='subType.Id' [textContent]='subType.Name'></option>
            </select>
        </div>
    </div>

It is assumed that the second select can be empty (undefined). At the initial time all works fine, both select have values, when the second ngModelChange changes, it works. But if I select any value in the first select , when the filter for the second select returns an empty array, then visually the second select is dropped to the value Not chosen ( undefined ), but the ngModel does not equal undefined .

For example:

item.TransportTypeId = 1;
item.TransportSubTypeId = 1;

change to:

item.TransportTypeId = 2;

The filterBy filter returns [], item.TransportSubType === 1 , but the value Not chosen is selected and the ngModelChange event does not occur.

Help me figure out how to make it so that select automatically resets the value of the model.

Answer 1

You need to add component logic as well to understand the query in right direction. But by looking to your query change the code as per below

(ngModelChange)="show($event)" 
//component
show(event) { this.val = event.value; }