用于清除整个表单的 Angular Material 按钮答案

【问题标题】：Angular Material button to clear entire form用于清除整个表单的 Angular Material 按钮
【发布时间】：2018-07-29 20:57:54
【问题描述】：

是否可以使用单个按钮清除/重置表单？该表单包含材料日期选择器、输入、文本区域、选择和复选框。

我的实际代码：

  <form class="example-form" #form="ngForm">
    <button mat-raised-button color="primary (click)="clear(form.value)">Clear</button>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Name" name="name" ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput [matDatepicker]="birthday" [(ngModel)]="geburtsdatum" placeholder="Geburtsdatum" name="geburtsdatum">
      <mat-datepicker-toggle matSuffix [for]="birthday"></mat-datepicker-toggle>
      <mat-datepicker #birthday></mat-datepicker>
    </mat-form-field>
    <mat-checkbox [(ngModel)]="unlimited" name="unbegrenzt">unlimited</mat-checkbox>
    <mat-form-field>
      <mat-select placeholder="Transpondertyp" name="transponderTyp" [(ngModel)]="form.transponderTyp">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let transponderTyp of transponderTyps" [value]="transponderTyp.value">
          {{ transponderTyp.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </form>

提前致谢:-)

最好的问候

【问题讨论】：

你可以使用 form.reset()

标签： angular typescript angular-material

【解决方案1】：

你必须在点击事件上清除模型：

 <form class="example-form" #form="ngForm">
    <button mat-raised-button color="primary (click)="clear(form.value)">Clear</button>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Name" name="name" ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput [matDatepicker]="birthday" [(ngModel)]="geburtsdatum" placeholder="Geburtsdatum" name="geburtsdatum">
      <mat-datepicker-toggle matSuffix [for]="birthday"></mat-datepicker-toggle>
      <mat-datepicker #birthday></mat-datepicker>
    </mat-form-field>
    <mat-checkbox [(ngModel)]="unlimited" name="unbegrenzt">unlimited</mat-checkbox>
    <mat-form-field>
      <mat-select placeholder="Transpondertyp" name="transponderTyp" [(ngModel)]="form.transponderTyp">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let transponderTyp of transponderTyps" [value]="transponderTyp.value">
          {{ transponderTyp.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
   <button (click)="resetForm()" >RESET</button>
  </form>

组件：

resetForm() {
  this.geburtsdatum = '';
  this.unlimited = '';
  this.form.transponderTyp = '';
  this.transponderTyp.value = '';
}

【讨论】：

【解决方案2】：

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

使用TD形式的reset()方法

【讨论】：

【解决方案3】：

将ngForm 指令访问到您可以使用的组件中：

ngForm.resetForm()

查看此示例：

http://plnkr.co/edit/Fbb9QQQBI2sWF6mdrcNU?p=preview

【讨论】：

【解决方案4】：

Suhag 的解决方案应该可以工作，尽管我总是会指定按钮类型，因此它不会被视为提交按钮：

<button type="button"(click)="form.reset()">Reset</button>

否则你可以这样做：

<button type="reset">Reset</button>

【讨论】：