导航到不同页面时仍会触发 Angular2 NgForm valueChanges

Posted 2023-03-13

【中文标题】导航到不同页面时仍会触发 Angular2 NgForm valueChanges

【英文标题】：Angular2 NgForm valueChanges is still triggered when navigating to different page

【发布时间】：2017-12-24 06:39:25

【问题描述】：

我正在处理一个 Angular 4.x 项目，并且有 2 个页面的路由配置正确。

在 page1 上，我订阅了 NgForm 的 valueChanges，如下所示：

this.myNgForm1.valueChanges.subscribe(data =>  
    console.log("Is myNgForm valid ? " + this.myNgForm1.valid); 
);

在加载 page1 时，我可以看到“MyNgForm 有效吗？false”。

但是，当点击链接进入page2时，我发现myNgForm1.valueChanges又被触发了，现在我可以看到“MyNgForm有效吗？true "

有什么办法可以避免在导航到不同页面时触发 myNgForm1 的 valueChanges 吗？谢谢！

【问题讨论】：

你使用模板驱动的表单还是响应式的？

【参考方案1】：

据我所知，您需要这样做：

this.valueChangesSubscriber = this.myNgForm1.valueChanges.subscribe(data =>  
    console.log("Is myNgForm valid ? " + this.myNgForm1.valid); 
);

然后在类中添加：

ngOnDestroy() 
    this.valueChangesSubscriber.unsubscribe()

【参考方案2】：

在ngOnDestroy退订

this.subscription = this.myNgForm1.valueChanges.subscribe(data =>  
    console.log("Is myNgForm valid ? " + this.myNgForm1.valid); 
);

ngOnDestroy() 
  this.subscription.unsubscribe();