Benutzerdefinierte Validierung Angular2

Question

Ich möchte benutzerdefinierte Validierung seit dem schaffen, wo i

[hidden]="email.valid && email.untouched" 

und anderen verwendet wird, ist für mich nicht genug. Ich möchte verschiedene Nachrichten anzeigen: 1. E-Mail nicht gültig und 2. E-Mail ist erforderlich.

Jetzt, wenn das Formular geladen ist, habe ich keine Validierungsmeldungen angezeigt, das ist gut, aber das Problem ist, wenn ich während der Eingabe oder außerhalb des Feldes klicken möchte.

Was ich brauche:

1. Während der Eingabe, wenn das Eingabefeld im Fokus, nicht die Überprüfungsmeldungen zeigen.
2. Sobald ich "example @ gmail" eingeben und außerhalb des Felds klicken, möchte ich Validierungsmeldung anzeigen, dass die E-Mail ungültig ist, aber wenn ich erneut auf das Feld klicke, um die Eingabe fortzusetzen, möchte ich die Nachricht entfernen, bis ich Verlassen Sie das Eingabefeld erneut.
3. Wenn ich den Inhalt „example @ gmail“ löschen, möchte ich die Nachricht anzuzeigen „E-Mail ist erforderlich“, und wieder, es zu verbergen, wenn ich das Feld

konzentrieren viel ich weiß, ihr aber ich konnte wirklich wirklich Hilfe bei der benutzerdefinierten Validierung. Ich benutzte Muster für E-Mail und gültig/unberührten/berührt, aber ich kann nicht genau das, was ich brauche.

Answer 1

Für Winkel 4 und höher:

According to This you can use "email validator". 

Example: 

If you use template-driven forms: 

<input type="email" name="email" email> 
<input type="email" name="email" email="true"> 
<input type="email" name="email" [email]="true"> 

Wenn Sie modellgetriebene Formulare verwenden (auch bekannt als ReactiveFormsModule) verwenden Validators.email:

this.myForm = this.fb.group({ 
    firstName: ['', [<any>Validators.required]], 
    email: ['', [<any>Validators.required, <any>Validators.email]], 
});