Javascript 反应式表单如何一次显示一条错误消息？

我用Angular 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>

您的电子邮件无效
只允许以.com.go和.jet结尾的电子邮件

当用户在输入字段中键入时，两个错误同时显示

---

如何一次显示一条错误消息？有可能吗？

如果生成了两个错误（因为输入不满足任何一个验证规则），您可以实现ngIf else开关以显示您首先想要的错误

逻辑运算符在这里很有用。您可以检查一个错误是否无效，另一个错误是否有效。理论可能有点混乱，下面是一个例子：

<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>

您的电子邮件无效
只允许以.com.go和.jet结尾的电子邮件

我还没有使用被动形式，所以您需要正确使用上述语法，我使用的是

ngForm

。这背后的简单逻辑是检查一个错误是否无效，另一个错误是否有效，这将一次显示一个错误

一个正确的语法编辑将受到高度赞赏