如何在搜索後清除表單中的所有字段？

在我的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 
}

搜索後，它看起來像這樣。我該如何解決這個問題？

來源

2017-04-25 Khushi

從你的代碼看來，你使用'selectedStatus'綁定它。所以當你清空所有輸入字段時。只要清除這個變量。你會完成它。 –

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

爲了增加岡特Zöchbauer的回答，只是空selectedStatus變量爲好，復位後。

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

來源

2017-04-25 06:36:37

感謝它爲我工作 – Khushi

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

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

Plunker example

來源

2017-04-25 05:29:16

哦，對不起，它不會爲我刪除。搜索後，selceted狀態不會被刪除。我給了這樣的： – Khushi

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

在我的情況下，狀態顯示不在輸入欄內;另一個分區。 – Khushi

如何在搜索後清除表單中的所有字段？

回答

相關問題