Question

我想在点击 x 按钮后清除ngModel。

<div class="form-group has-feedback marginBottom10">
    <input type="text" id="searchInput" [(ngModel)]="searchClass" (keyup.enter)="searchSchemaClass(searchClass)" 
      class="form-control" name="search" placeholder="{{ 'App.Labels.Search' | translate}}" />  
      <span class="glyphicon glyphicon-remove form-control-feedback" *ngIf="searchClass" (click)="searchClass=''"></span>
</div>

不明白为什么不清除文本框。即使我试图在点击时调用功能，但它无法正常工作。

Answer 1

您可以使用输入type="search"

<input type="search" id="searchInput" 
 [(ngModel)]="searchClass" 
 (keyup.enter)="searchSchemaClass(searchClass)" 
 class="form-control" name="search" 
 placeholder="{{ 'App.Labels.Search' | translate}}" />

注意：它支持IE11 +和其他现代浏览器，check here

自定义版

<div class="form-group has-feedback marginBottom10">
    <input type="text" id="searchInput" [(ngModel)]="searchClass" (keyup.enter)="searchSchemaClass(searchClass)" 
      class="form-control" name="search" placeholder="{{ 'App.Labels.Search' | translate}}" />  
      <span
        class="glyphicon glyphicon-remove form-control-feedback" 
        *ngIf="searchClass?.length" (click)="searchClass=''">
      </span>
</div>

Answer 2

更改输入type="text"中的输入type=search，转换(click)="clear()"中的点击功能，并执行以下操作：

clear(){
  this.searchClass = null;
}

这应该有用。

Angular 2 - 使用输入字段内的按钮清除文本字段

2 个答案: