清除过滤器 Angular 6

Question

我有一个 table 带有这样的过滤器：

<form  [formGroup]="form"  (ngSubmit)="onSubmit()">
   <mat-form-field class="filter" floatLabel="never">
      <mat-label>Name</mat-label>
         <input matInput formControlName="nameFilter">
      </mat-form-field> 
  <button mat-raised-button class="search">Search</button>
</form>

<button mat-raised-button class="reset" (click)="resetFilter()">Reset</button>

我应该在我的 TS 中插入什么才能取消过滤器？我需要在表单中插入按钮 "filter" 吗？

Answer 1

FormGroup本身有一个reset方法。直接调用即可。

<button mat-raised-button class="reset" (click)="form.reset()">Reset</button>

Answer 2

form  #myform="ngForm" [formGroup]="form"  (ngSubmit)="onSubmit()">
   <mat-form-field class="filter" floatLabel="never">
      <mat-label>Name</mat-label>
         <input matInput formControlName="nameFilter">
      </mat-form-field> 
  <button mat-raised-button class="search">Search</button>
</form>

<button mat-raised-button class="reset" (click)="resetFilter(myform)">Reset</button>

ts

class MyFormComponent {
 @ViewChild('myform') form;

 resetFilter(form) {
  // you can access form via viewchild or via parameter
  this.myform.controls['nameFilter'].value = null;
 }
}

Answer 3

您需要使用angular的重置方法，这是默认的表单方法。您需要在单击重置过滤器并清除以下表单组名称时调用此方法

resetFilter() { this.contactForm.reset(); }

Answer 4

使用表单的reset() API

<button mat-raised-button class="reset" (click)="form.controls.nameFilter.reset()">Reset</button>

清除过滤器 Angular 6

Clear Filter Angular 6

angular

button

filter

angular-material

reset