我们如何将输入类型设置为 Reset 并在 Reset 上设置 Click 事件

【问题标题】：How do we give input type as Reset and a Click event on Reset我们如何将输入类型设置为 Reset 并在 Reset 上设置 Click 事件
【发布时间】：2022-01-06 23:41:42
【问题描述】：

我有一个输入类型 = 重置的重置按钮。单击重置按钮时，我需要先清除所有字段，然后我必须执行一个方法。所以我正在使用点击事件，但无法通过类型重置来执行两者。

<button type="reset">Reset</button>                          // Line 1
<button (click)="resetView()" type="button">Reset</button>  // Line 2

resetView(){
  // Some method
}

第一行仅启用字段重置。第二行仅在不清除字段的情况下点击 resetView() 方法。如何同时包含 reset 和 resetView() 方法

【问题讨论】：

你有没有尝试将它们组合起来：<button type="reset" (click)="resetView()">？
是的，这是先执行方法，然后重置所有字段。我想先重置所有字段，然后执行方法。 @MaxXx1313

标签： javascript html jquery angular

【解决方案1】：

我想到了 3 种方式可以用角度处理表单：

使用form标签：

<form #myForm>
 <!-- here some other controls -->
 <button (click)="myForm.reset(); resetView()">Reset</button>
</form>

使用ngModel:

 <input [(ngModel)]="myInput1"/>
 <input [(ngModel)]="myInput2"/>
 <!-- here some other controls -->
 <button (click)="resetForm(); resetView()">Reset</button>

resetForm(){
  this.myInput1 = '';
  this.myInput2 = '';
  // etc.
}
resetView(){
  // Some method
}

使用FormGroup:

<div [formGroup]="myForm">
 <input formGroupName="myInput1"/>
 <input formGroupName="myInput2"/>
 <!-- here some other controls -->
 <button (click)="resetForm(); resetView()">Reset</button>
</div>

readonly myForm = new FormGroup({
  myInput1: new FormControl(''),
  myInput2: new FormControl(''),
  // etc.
});

resetForm(){
  this.myForm.reset();
}
resetView(){
  // Some method
}

【讨论】：