Maintenez l'intégrité des données avec les Validators

Même si la majeure partie de la validation se passe côté serveur, Angular vous permet d'ajouter une première couche de validation de formulaire côté front-end.

Vous allez utiliser les Validators pour mettre en place les champs requis du formulaire de contact, ainsi que pour vérifier le format de l'adresse email entrée par l'utilisateur.

Validez le formulaire

Ajouter une validation aux formulaires réactifs est plutôt simple : il suffit de les ajouter à la configuration des champs passés à la méthodegroupde FormBuilder.

Les champs requis

La première validation que vous allez ajouter est celle qui vérifie que les champs requis contiennent bien des valeurs. Le Validator correspondant estValidators.required:

contactForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required]],
    course: ['', [Validators.required]],
    message: [''],
    avatarUrl: ['']
});

Pour empêcher l'utilisateur d'envoyer le formulaire s'il n'est pas valable, vous pouvez afficher un message d'alerte lorsque l'utilisateur clique sur Begin Your Journey. Modifiez la méthode  onSubmitForm  comme suit :

onSubmitForm() {
    if (!this.contactForm.valid) {
        alert('Please finish filling in the form before submitting.');
        return;
    }
    console.log(this.contactForm.value);
}

Ainsi, si vous n'entrez rien dans les champs requis :

L'adresse mail

Vous allez maintenant ajouter un deuxième Validator au champemailpour vérifier que le texte entré par l'utilisateur correspond à une adresse email – il s'agit deValidators.email.

contactForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]],
    course: ['', [Validators.required]],
    message: [''],
    avatarUrl: ['']
});

Si vous testez le formulaire de nouveau, vous verrez que si vous mettez autre chose qu'une adresse mail dans le champ Email, le message d'alerte s'affiche.

L'URL de l'image

Le dernier Validator que vous allez mettre en place pour ce formulaire sera pour vérifier la forme de l'URL de l'avatar de l'utilisateur. Pour cela, vous allez utiliser le Validatorpatternqui prend une RegEx en argument :

contactForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]],
    course: ['', [Validators.required]],
    message: [''],
    avatarUrl: ['', [Validators.pattern(URL_REGEX)]]
});

Avec ça, votre formulaire ne peut plus être soumis sans que l'URL de l'avatar ressemble bien à un URL.

Cependant, si vous tapez votre URL à la main, vous verrez un bug dans notre système :

Changez le rythme des émissions

Ce bug apparaît parce que l'aperçu de l'avatar sous le formulaire reçoit toutes les valeurs intermédiaires de l'URL, et essaie de les attribuer comme sources d'image. Par conséquent, l'URL n'est pas complet, le navigateur cherche à montrer une image qui n'existe pas !

Pour éviter ces requêtes inutiles, vous pouvez modifier le déclenchement devalueChanges  du formulaire pour émettre uniquement lorsque l'utilisateur change de champ, c'est-à-dire lors du  blurdes différents champs. Pour ceci, vous allez passer un objet de configuration à la méthode  group:

contactForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]],
    course: ['', [Validators.required]],
    message: [''],
    avatarUrl: ['', [Validators.pattern(URL_REGEX)]]
}, { updateOn: 'blur' });

Maintenant, les informations entrées dans le formulaire ne sont affichées dans l'aperçu que lorsque l'utilisateur change le focus du formulaire, évitant ainsi le bug de l'image :

À vous de jouer

Contexte

Le formulaire pour le profil utilisateur n'a, pour l'instant, aucune validation ! On souhaiterait empêcher les utilisateurs de soumettre un formulaire incomplet ou avec des valeurs invalides.

Consigne

1. Voici les validations à ajouter sur ce formulaire :

1. name,titleetbiosont des champs requis

2. websitedoit correspondre à un URL

1. Lorsque l'utilisateur clique sur Save Profile, si le formulaire est valide, loggez-en le contenu à la console ; sinon, affichez un message d'alerte.

2. Pour éviter l'effet "en train de taper" sur l'aperçu du profil, faites en sorte que le formulaire n'émette ses changements que lorsque l'utilisateur blur le champ en question.

Corrigé

En résumé

• Ajoutez de la validation aux contrôles de vos formulaires en passant des Validators au moment de la configuration du FormGroup.

• Validators.requiredrend un champ du formulaire requis.

• Validators.emailvérifie que le contenu d'un champ ressemble à une adresse mail.

• Validators.patternvérifie que le contenu d'un champ correspond à une expression régulière.

Je vous invite à valider ce que vous avez appris avec le quiz suivant – à très vite !