Как отменить выбор выбранной опции в md-select Angular2

Question

В материале2, когда инициализируется выбор, значение по умолчанию не выбрано. Если пользователь выбирает значение, он не может его отменить. Я хочу, чтобы пользователь мог отменить выбор значения.

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, чтобы получить требуемый результат.

<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> 

В компоненте

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

plunkr для ответа.

Answer 2

Я не другое решение, я думаю, что стоит упомянуть, это: добавить пустой <md-option> и reset в <md-select> на его 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> 

таким образом вам не нужно никакого специального кода в вашем Component ни использовать ngModel

см Plunker

Answer 3

Если вы используете угловатые формы, вы всегда можете patchValue в '' как показано ниже.

Во-первых, элемент выбора. В этом примере используется Ionic, но это то же самое, что и Angular.

<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.

form: FormGroup; 

И метод unselect заплаты нулевое значение.

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

С уважением!