表单验证失败后如何显示模式？答案

【问题标题】：How can I show a modal after failed form validation?表单验证失败后如何显示模式？
【发布时间】：2019-07-23 16:37:14
【问题描述】：

在 Angular 中使用响应式表单时，我们通常会在教程中看到同步验证器和表单控件下的小 <p> 或 <span> 错误。这个元素有一个简单的*ngIf 来控制它的显示。

尽管如此，当异步验证器失败时，我需要显示一个模式。从我在 ng-bootstrap 和 ngx-bootstrap 中看到的内容，模态被打开调用一个函数，并且不完全监听验证中的变化（我可以使用<p> 和*ngIf 轻松完成）。

目前，我在表单控件中使用更改侦听器，它调用验证它的 API。如果 API 返回无效，我会提出一个包含在表单控件的同步验证器中的标志（因此使整个表单无效），并从那里打开模式。（最终我没有使用异步验证器）。

我觉得那段代码很有趣。

有没有更好的方法来做到这一点？谢谢！

【问题讨论】：

你能通过 stackblitz 分享你的代码吗？
@NicholasK 你是对的，应该将代码添加到问题中，但它不应该依赖外部资源。这就是内联堆栈 sn-p 工具存在的原因。
请帮助我们为您提供帮助。请至少在您的问题上与我们分享您的代码
@TylerRoper：有点延迟响应，但 IMO 内联堆栈 sn-p 工具在有多个组件/模板/模块/路由等的角度无法很好地工作。
@NicholasK 外部资源可用于补充信息，我的主要观点是问题不能依赖。问题本身必须有足够的信息，无论是代码还是其他信息，以便有人可以回答它而无需在其他地方导航。原因是，StackOverflow 的目的是为未来的读者建立一个知识库。如果这个链接在路上变坏了，这个问题就变得毫无用处了。

标签： javascript angular typescript

【解决方案1】：

我喜欢使用 ngx-smart-modal 库来进行这种模态管理。

文档 => https://www.npmjs.com/package/ngx-smart-modal

当涉及到模态时，这个库使得管理打开/关闭/数据传递/自定义/等变得非常容易。

【讨论】：

【解决方案2】：

如果您已经附加了异步验证器，则必须使用 FormControl 的 statusChanges 属性和 distinctUntilChanged 管道以防止重复：

this.userForm.get('username').statusChanges
  .pipe(distinctUntilChanged())
  .subscribe(status => {
     // if status is invalid, open dialog or whatever yo like
     console.log('Username validation status: '+ status);
  });

【讨论】：