Javascript 表单验证失败后，如何显示模式？

在Angular中使用反应式表单时，我们通常会在教程中看到同步验证器和表单控件下带有错误的小

或

。此元素有一个简单的

*ngIf

，用于控制其显示

然而，当异步验证器失败时，我需要显示一个模式。从ng bootstrap和ngx bootstrap中我看到，模式是通过调用函数打开的，并不完全监听验证中的更改（我可以通过

和
*ngIf
轻松地完成）

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

我觉得那个密码很奇怪

有更好的方法吗？谢谢
 如果您已经连接了异步验证程序，则必须使用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);
  }); 

如果已连接异步验证器，则必须使用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);
  }); 

我喜欢使用ngx智能模式库进行这种模式管理

文档=>

当涉及到modals时，这个库可以很容易地管理打开/关闭/数据传递/定制等
 我喜欢使用ngx智能模式库进行这种模式管理

文档=>

当涉及到modals时，这个库可以很容易地管理打开/关闭/数据传递/定制等
 你能通过stackblitz分享你的代码吗？@NicholasK你是对的，代码应该添加到问题中，但它永远不应该依赖外部资源。这就是内联堆栈代码段工具存在的原因。请帮助我们帮助您。与我们分享您的代码，至少在您的问题上please@TylerRoper：响应有点延迟，但在我看来，内联堆栈代码段工具在angular上并不太好用，因为angular有多个组件/模板/模块/路由等。@NicholasK外部资源可以提供补充信息，我的主要观点是，这个问题不能依赖它。问题本身必须有足够的信息，无论是代码还是其他信息，以便有人能够回答，而无需导航到其他地方。原因是，StackOverflow的目的是为未来的读者建立一个知识库。如果这个链接在路上坏了，这个问题就没用了。你能通过stackblitz分享你的代码吗？@NicholasK你是对的，代码应该添加到问题中，但它永远不应该依赖外部资源。这就是内联堆栈代码段工具存在的原因。请帮助我们帮助您。与我们分享您的代码，至少在您的问题上please@TylerRoper：响应有点延迟，但在我看来，内联堆栈代码段工具在angular上并不太好用，因为angular有多个组件/模板/模块/路由等。@NicholasK外部资源可以提供补充信息，我的主要观点是，这个问题不能依赖它。问题本身必须有足够的信息，无论是代码还是其他信息，以便有人能够回答，而无需导航到其他地方。原因是，StackOverflow的目的是为未来的读者建立一个知识库。如果这一联系在未来变得不好，那么这个问题就没有用了。