javascript - Reaktiva formulär Hur visar man ett felmeddelande i taget?

Jag använder Angular 7 och har skapat ett reaktivt formulär. Inmatningsfältet email har två validatorer inställda på sig, se nedan:

email: ['', [Validators.email, Validators.pattern('^[\\w._]+@company(.com|.go|.jet)')]],

Båda validatorerna har 2 felmeddelanden i mallen:

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

När användaren skriver i inmatningsfältet visas båda felen samtidigt.

Hur kan jag visa ett felmeddelande åt gången? Är det möjligt?

Svar #1

Om båda felen genereras (eftersom inmatningen inte uppfyller någon av valideringsreglerna) kan du implementera en ngIf-else-switch för att visa det fel du vill först. Ett exempel på detta kan hittas här.

Svar #2

En logisk operator kommer att vara användbar här. Du kan kontrollera om ett fel inte är giltigt och ett annat är giltigt. Teorin kan vara lite förvirrande, här är exemplet nedan:

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

Jag har inte använt reaktiva formulär än så du behöver arbeta med ovanstående syntax ordentligt, jag använder ngForm. Den enkla logiken bakom detta är att kontrollera om ett fel inte är giltigt och ett annat är giltigt vilket kommer att visa ett fel i taget.

En redigering med korrekt syntax kommer att uppskattas mycket.