反应性表单如何一次显示一个错误消息？
反应性表单如何一次显示一个错误消息？
提问于 2018-11-07 15:08:13
我使用角7，并创造了一个反应形式。输入字段email在其上设置了两个验证器，如下所示：
email: ['', [Validators.email, Validators.pattern('^[\\w._]+@company(.com|.go|.jet)')]],两个验证器在模板中都有2条错误消息：
<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('email') && hideFocus">Your email is invalid</label>
<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('pattern') && hideFocus">Only emails ending with .com .go and .jet are allowed</label>当用户在输入字段中输入时，同时显示两个错误。
如何一次显示一条错误消息？有可能吗？
回答 2
Stack Overflow用户
发布于 2018-11-07 15:14:14
如果生成了这两个错误(因为输入不满足验证规则中的任何一个)，您可以实现ngIf-否则切换，以显示您首先想要的任何错误。这方面的例子可以在这里找到。
Stack Overflow用户
发布于 2018-11-07 15:18:00
在这里，逻辑运算符会有所帮助。您可以检查一个错误是否无效，另一个错误是否有效。理论可能有点混乱，下面的例子如下：
<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('email') && hideFocus">Your email is invalid</label>
<label for="email" class="error-msg" *ngIf="!authForm.get('email').hasError('email') && authForm.get('email').hasError('pattern') && hideFocus">Only emails ending with .com .go and .jet are allowed</label>我还没有使用反应性表单，所以您需要正确地使用上面的语法，我使用ngForm。这背后的简单逻辑是检查一个错误是否无效，另一个错误是否有效，这将一次显示一个错误。
具有正确语法的编辑将受到高度赞赏。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53192208
复制相关文章
相似问题
腾讯云开发者
