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

Question

在Angular中使用反应式表单时，我们通常会在教程中看到同步验证器和带有错误的表单控制下的小型<p>或<span>。此元素具有一个简单的*ngIf，可以控制其显示。

不过，当异步验证程序失败时，我需要显示一个模式。根据我在ng-bootstrap和ngx-bootstrap中看到的内容，模态已打开，调用了一个函数，并且未完全听取验证中的更改（使用<p>和{{1}可以轻松完成此操作}。

当前，我在表单控件中使用一个更改侦听器，该侦听器调用用于验证它的API。如果API返回无效，我将引发一个包含在表单控件的同步验证器中的标志（因此使整个表单无效），然后从那里也打开模式。 （最终我没有使用异步验证器）。

该代码对我来说很有趣。

有更好的方法吗？谢谢！

Answer 1

如果您已经附加了异步验证器，则必须使用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);
  }); 

Answer 2

我喜欢使用ngx-smart-modal库来进行这种模式内务处理。

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

使用此库可以很轻松地管理涉及模态的打开/关闭/数据传递/定制/等。