Angular 表单重置事件通知？

通过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演示

基于“重置”事件，仅在

时触发。这可能是浏览器中的默认行为

Angular的

resetForm（）

和

reset（）

实际上不会触发重置事件。它只是通过编程还原表单的值

resetForm（）

允许您重置角度表单的提交状态，还可以通过传入如下对象来定义要重置的表单的初始值：

resetForm（{}）

这可以通过在属性指令中添加一个

@HostListener（'reset'）

来证明，以侦听重置事件。调用（或者单击）form.resetForm（）和

form.reset（）

时，根本不会触发重置事件

---

侦听按钮的属性指令中的单击 要解决此问题，只需使用

？但是如果它不适合您的用例，并且您需要使用

并且仍然检测到重置事件，那么您可能可以添加另一个@HostListener来侦听输入类型按钮的单击事件：

@HostListener（'click'，['$event.target']）onFormClick（btn:HTMLButtonElement）{
//控制台日志（btn）
如果（btn.type==“按钮”）{
log（“在“角度重置”按钮上检测到点击事件，触发重置事件！”）；
这个.form.onReset（）；
}
}

---

检测何时调用NgForm的resetForm（）（编辑）

//存储原始resetForm（）的步骤
resetFormFunc；
构造函数（私有表单：NgForm，私有elRef:ElementRef）{
...
this.resetFormFunc=form.resetForm；//将resetForm函数分配给“存储”它。
//“重写”ReSeTy表形器（），并在中间调用原始ReSeFiffMe（）
form.resetForm=（）=>{
log（“检测到调用resetForm（）！”；
this.resetFormFunc.apply（form，arguments）；//实际调用form.resetForm（）
log（“我的附加代码”）；
}
}

单击“角度重置”时：

---

希望这有帮助

不确定为什么未触发onReset。但作为一种解决方法，您可以尝试执行

角度重置

我不希望我的库的使用者必须手动调用重置功能。我遇到的问题是，我的库的使用者创建按钮，我的指令是需要通知重置发生的内容。当可以使用reset按钮但将所有绑定重置为null时，这一切都是好的，有时您需要使用resetForm来传递模型，但我找不到一种方法让我的指令得到通知。现在我有办法让我的消费者开始做这种事情。啊，我的错，我误解了你的问题。如果您试图将原始的

form.resetForm（）

保存在变量中，然后在调用原始的resetForm（）之前重写

resetForm（）

，会怎么样？类似于我在中编辑的第二次stackblitz…重写resetForm方法可以让我完全做我需要的事情