表单重置事件通知？

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 事件，“reset”事件仅在<input type="reset">. 这可能是浏览器中的默认行为。

\n\n

Angular实际上resetForm()并reset()不会触发重置事件。它只是以编程方式恢复表单的值。resetForm()允许您重置角度表单的提交状态，并通过传入如下对象来定义要重置的表单的初始值： resetForm({})。

\n\n

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

\n\n\n\n

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

\n\n

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

\n\n

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

\n\n\n\n

检测 NgForm\'s resetForm() 何时被调用（编辑）

\n\n

\n//to store original resetForm()\nresetFormFunc;\n\nconstructor(private form: NgForm, private elRef: ElementRef) {\n\n   ...\n\n   this.resetFormFunc = form.resetForm; //assigning resetForm function to "store" it.\n\n   //"Override" resetForm(), and call original resetForm() in the middle\n   form.resetForm = () => {\n     console.log("detected calling of resetForm()!");\n     this.resetFormFunc.apply(form, arguments); //actually call form.resetForm()\n     console.log("my additional code");\n   }\n}\n

\n\n

单击“角度重置”时：\n

\n\n

#2 分叉 Stackblitz \xe2\x9a\xa1

\n\n

希望这可以帮助！

\n