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

Question

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

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

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

该代码对我来说很有趣。

有一个更好的方法吗？ 谢谢！

Answer 1

如果你已经有了一个异步验证连接，你必须使用statusChanges FormControl的财产，与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

当涉及模态时，该库使管理打开/关闭/数据传递/定制/等非常容易。