Question

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

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

Answer 1

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

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

Plunker example

Answer 2

要添加到GünterZöchbauer的答案，只需在重置后清空selectedStatus变量。

jupyter nbconvert --to script --execute --stdout test_nbconvert.ipynb | python

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

2 个答案: