我正在使用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>
当用户在输入字段中键入时，两个错误将同时显示。
如何一次显示一条错误消息？有可能吗？
答案 0 :(得分：0)
如果同时产生了两个错误（因为输入不满足任何一个验证规则），则可以实现ngIf-else开关以显示您首先要显示的任何错误。 An example of this can be found here.
答案 1 :(得分：0)
在这里，逻辑运算符会有所帮助。您可以检查一个错误无效，而另一个错误有效。理论可能有点混乱，这是下面的示例：
<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。这背后的简单逻辑是检查一个错误是否无效而另一个错误有效，这一次将显示一个错误。
高度赞赏使用正确语法进行的编辑。