md-select Angular2で選択したオプションの選択を解除する方法

Question

Material2では、selectを初期化するときにデフォルト値は選択されません。ユーザーが値を選択した場合、ユーザーは値を選択解除できません。ユーザーが値を選択解除できるようにしたい。

Plunkr

私はhelp already availableを経て、それを使用することができませんでした。

<mat-select id="formal" formControlName="formal" placeholder="Default - No value selected"> 
    <mat-option value="1">formal</mat-option> 
    <mat-option value="2">informal</mat-option> 
</mat-select> 

Answer 1

ngModelを使用し、その値をundefinedに設定して、必要な結果を得ました。答えのためのコンポーネント

unselect(): void { 
    this.selectedValue = undefined; 
} 

plunkrで

<md-select id="formal" [(ngModel)]="selectedValue" formControlName="formal" placeholder="Default - No value selected"> 
    <md-option value="1">formal</md-option> 
    <md-option value="2">informal</md-option> 
</md-select> 

<div (click)="unselect()">click me to clear md select</div> 

。

Answer 2

私はそれを言及する価値だと思う別のソリューションがあります：あなたはComponent内の任意のカスタムコードを必要としないどちらもngModelを使用していないそのclick

<md-select id="formal" formControlName="formal" placeholder="Default - No value selected"> 
     <md-option (click)="form.controls.formal.reset()"></md-option> 
     <md-option value="1">formal</md-option> 
     <md-option value="2">informal</md-option> 
    </md-select> 

に<md-select>を空<md-option>を追加し、resetこの方法を

あなたが角度のフォームを使用している場合、あなたは常にpatchValue 0123にすることができますPlunker

Answer 3

を見ますのようにしてください。

まず、select要素。この例ではIonicを使用していますが、Angularと同じです。 formがFormGroupある

<ion-select formControlName="formal" item-start> 
    <ion-option *ngFor="let option of input.options" value="{{option}}">{{option}}</ion-option> 
</ion-select> 

<ion-icon color="danger" name="close" (click)="unselect('formal')" item-end></ion-icon> 

。

form: FormGroup; 

そしてunselectメソッドはnull値をパッチ。

unselect(id: string): void { 
    let reset = {}; 
    reset[id] = '' 
    this.form.patchValue(reset); 
    } 

よろしくお願いいたします。