表单重置事件通知？

Question

通过formReset方法重置表单时，是否有办法得到通知？

我有一个注入表单的指令，当表单提交或通过重置按钮重置时，我可以得到通知，但是当在ngForm上调用formRest时，我无法弄清通知的方式。

@Directive({
  selector: '[appForm]'
})
export class FormDirective implements OnDestroy {
  private subscription: Subscription;

  constructor(form: NgForm) {
    this.subscription = form.ngSubmit.subscribe(() => {
      console.log('submitted');
    });
    form.onReset = () => {
      console.log('reset');
    };
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

使用类似的指令

<form appForm #form="ngForm">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" (click)="form.resetForm()">Angular reset</button>
</form>

是否可以通知我的指令resetForm方法已被调用？

StackBlitz https://stackblitz.com/edit/angular-adymlf?file=src/app/form.directive.ts上的演示

Answer 1

基于w3schools onReset event，仅在<input type="reset">时才触发“重置”事件。这可能是浏览器中的默认行为。

Angular的resetForm()和reset()实际上不会触发重置事件。它只是以编程方式还原表格的值。 resetForm()允许您重置角度表单的提交状态，还可以通过传入这样的对象来定义要重置为该表单的初始值：resetForm({})。

可以通过在属性指令中添加@HostListener('reset')来监听重置事件来证明这一点。调用form.resetForm()和form.reset()（或单击）时，根本不会触发重置事件。

---

监听按钮的属性指令中的点击

要解决此问题，您可以简单地使用<button type="reset">？但是，如果它不适合您的用例，并且您需要使用<button type="button">并仍然检测到重置事件，则可以添加另一个@HostListener来侦听按钮输入类型的点击事件：

@HostListener('click', ['$event.target']) onFormClick(btn: HTMLButtonElement){
  // console.log(btn)
  if(btn.type == "button"){
    console.log("detected click event on 'Angular reset' button, triggering reset event!");
    this.form.onReset();
  }
}

---

检测何时调用NgForm的resetForm（）（EDIT）

//to store original resetForm()
resetFormFunc;

constructor(private form: NgForm, private elRef: ElementRef) {

   ...

   this.resetFormFunc = form.resetForm; //assigning resetForm function to "store" it.

   //"Override" resetForm(), and call original resetForm() in the middle
   form.resetForm = () => {
     console.log("detected calling of resetForm()!");
     this.resetFormFunc.apply(form, arguments); //actually call form.resetForm()
     console.log("my additional code");
   }
}

单击“角度重置”时：

#2 Forked Stackblitz ⚡

希望这会有所帮助！