[Angular] select ボックスで ngModel を使う場合に、初期表示を「選択してください（かつdisable)」にしたい。

select で 初期表示を disabled だけど選択された状態にしたい時ってありますよね。

普通の HTML なら、 selected という Attribute（属性）をつけると選んでくれます。

ただ、 ngModel を使う場合、選択状態は、モデルの値により変わるので、 selected は効きません。

サンプルコード

<select [(ngModel)]="test">
    <option disabled="disabled" selected>選択してください</option>
    <option [value]="'test1'">ひとつめ</option>
    <option [value]="'test2'">ふたつめ</option>
</select>

上記のようなコードは、

こうなって

こうなります。

本当は、こう↓なってほしい！

解決方法

この現象の原因は、 ngModel により、 ngModel の状態の option を選択するためです。
なので、下記のようにしてあげれば動きます。（最初に初期化して undefined を入れている場合）

<select [(ngModel)]="test">
    <option disabled="disabled" [value]="undefined">選択してください</option>
    <option [value]="'test1'">ひとつめ</option>
    <option [value]="'test2'">ふたつめ</option>
</select>

簡単ですね。