如何取消选择md-select中的选定选项Angular2

在material2初始化select时，未选择默认值。如果用户选择一个值，他不能取消选择它。我想让用户取消选择该值。如何取消选择md-select中的选定选项Angular2

我通过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>

来源

2017-02-02 Mahin Khan

我结束了使用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的答案。

来源

2017-02-02 15:52:18

plunkr链接boken – eagor

我已经另一种解决方案，我认为值得一提的是：在其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-option>和reset的<md-select>在你不需要任何自定义代码你Component既不使用ngModel

看到Plunker

来源

2017-02-03 08:08:49

它仍然选择在这种情况下的东西和空值。我正在寻找，完全将其设置为默认状态。 –

在一个普通的html select中你没有这个选项...你需要创建一个空的'option'或者'' - 选择一些 - ''选项'来获得一个“默认状态”。这种方式更适合于用户界面，因为用户可以选择没有选择，而不是点击按钮，但我不知道您的用户案例。 ;-) –

plunkr链接是生气的 – eagor

如果您正在使用角的形式，你可以随时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); 
    }

此致敬礼！

来源

2017-10-01 21:07:52

如何取消选择md-select中的选定选项Angular2

回答

相关问题