如何在搜索后清除表单中的所有字段？

问题描述：

在我的angular2应用程序中，我有一个搜索表单。它包含输入字段，下拉菜单，自动完成和多选择自动完成功能。搜索后，我需要清除这个表单，但除了自动完成多重选择之外，一切都会清除。我如何删除它。我所拥有的是：如何在搜索后清除表单中的所有字段？

component.html

<div class="form-group"> 
    <label class="col-md-3 control-label">Status</label> 
      <div class="col-md-4"> 
       <input id="status" type="text" class="form-control" autocomplete="off" [(ngModel)]="ticket.status" [ngModelOptions]="{standalone: true}" 
            (keyup)=filterStatus() placeholder="select status"> 
         <div class="suggestions" *ngIf="filteredStatusList.length > 0"> 
         <ul *ngFor="let status of filteredStatusList"> 
          <li> 
           <a (click)="selectStatus(status)">{{status}}</a> 
          </li> 
         </ul> 
      </div> 
      <div *ngFor="let status of selectedStatus"> 
       <div id="selected" class="selected"> 
         <span id="selectedStatus">{{status}}</span> 
          <a (click)="removeStatus(status)">x</a> 
       </div> 
      </div> 
     </div> 
</div>

这是自动完成与多选。在serach之后它不会被删除。

component.ts

search() { 
    // serach code here 
}

搜索后，它看起来像这样。我该如何解决这个问题？

从你的代码看来，你使用'selectedStatus'绑定它。所以当你清空所有输入字段时。只要清除这个变量。你会完成它。 –

是的，试试@GünterZöchbauer的答案，这也可以。 –

答

为了增加冈特Zöchbauer的回答，只是空selectedStatus变量为好，复位后。

<button (click)="search();form.reset();selectedStatus=[]">search</button>

感谢它为我工作 – Khushi

答

<div class="form-group" #form="ngForm"> 

<button (click)="search();form.reset()">search</button>

Plunker example

哦，对不起，它不会为我删除。搜索后，selceted状态不会被删除。我给了这样的： – Khushi

工作在https：// plnkr。 co/edit/KqWHDbldWhQUOTWkTvbS？p = preview –

在我的情况下，状态显示不在输入栏内;另一个分区。 – Khushi

如何在搜索后清除表单中的所有字段？

相关推荐