как реализовать ngModel в select с выбранным пользователем значением по умолчанию

Question

У меня следующий HTML код: -

    <form (ngSubmit)="searchTrain()">
        <div class="input-group">
            <select name="source" [(ngModel)]="source" required>
                <option [value]="" [selected]="true">-- source --</option>
                <option *ngFor="let src of sourceList" [value]="src">{{src}}</option>
            </select>
        <div class="text-center">
            <button type="submit" class="btn btn-primary">Find Trains</button>
        </div>
    </form>

и компонент: -

    source = '';
    sourceList = ['Hyderabad', 'Bangalore', 'Ranchi', 'Patna', 'Delhi', 'Chennai', 'Mumbai', 'Pune', 'Kolkata', 'Jaipur'];

    searchTrain(){
        console.log(this.source);
    }

Здесь я хочу

1. -- source -- быть выбранным по умолчанию.
2. когда я изменяю опцию, я должен получить выбранную опцию в контроллере.

Но это не происходит здесь.

Я пытался с <select name="source" (ngModelChange)="source = $event" required> вместо <select name="source" [(ngModel)]="source" required> и опция по умолчанию выбрана успешно, но тогда я не могу получить выбранную опцию в контроллере при отправке формы.

Как можно выполнить оба условия?

Answer 1

С помощью [(ngModel)] вы можете добавить в него этот код:

<select name="source" [(ngModel)]="defaultValue" required>

Со значением по умолчанию в компоненте:

defaultValue = '-- source --';

Рабочий пример: https://stackblitz.com/edit/angular-empty-default-for-select?file=src%2Fapp%2Fapp.component.ts