Appearance
Comment ajouter des validateurs synchrones ? ​
Voici comment vous pouvez utiliser la propriété validators
pour ajouter des validateurs aux contrĂ´les FormControl dans l'exemple de code LoginFormComponent
:
ts
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-login-form',
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<label>
Email:
<input type="email" [formControl]="emailControl">
</label>
<br>
<label>
Mot de passe:
<input type="password" [formControl]="passwordControl">
</label>
<br>
<button type="submit">Se connecter</button>
</form>
`
})
export class LoginFormComponent {
private formBuilder = inject(FormBuilder);
emailControl = new FormControl('', [Validators.required, Validators.email]);
passwordControl = new FormControl('', [Validators.required, Validators.minLength(6)]);
form = this.formBuilder.group({
email: this.emailControl,
password: this.passwordControl
})
onSubmit() {
// La soumission du formulaire est gérée ici
}
}
Dans cet exemple, nous avons ajouté les validateurs Validators.required
et Validators.email
au contrĂ´le FormControl emailControl
, et les validateurs Validators.required
et Validators.minLength(6)
au contrĂ´le FormControl passwordControl
. Ces validateurs exigent respectivement que le champ de courriel soit obligatoire et ait un format de courriel valide, et que le champ de mot de passe soit obligatoire et ait au moins 6 caractères.
Validateur selon un autre champ (exemple: confirmation de mot de passe) ​
Vous pouvez également ajouter des validateurs de groupe en utilisant la méthode FormGroup
de FormBuilder. Par exemple, pour ajouter une validation de groupe qui vérifie que les champs "password" et "confirmPassword" sont identiques :
ts
import { FormGroup } from '@angular/forms';
// ...
form = this.formBuilder.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, { validator: this.checkPasswords });
checkPasswords(group: FormGroup) {
let pass = group.controls.password.value;
let confirmPass = group.controls.confirmPassword.value;
return pass === confirmPass ? null : { notSame: true }
}
// ...
Comment utiliser ces erreurs de validation dans votre template HTML ? ​
Voici comment vous pouvez utiliser les erreurs de validation dans votre template HTML avec Angular :
angular-html
<form>
<label>
Champ:
<input type="text" [formControl]="control">
</label>
<!-- Affichage des erreurs de validation -->
@if (control.invalid && (control.dirty || control.touched)) {
@if (control.hasError('required')) {
<div>Le champ est obligatoire.</div>
}
@if (control.hasError('minlength')) {
<div>Le champ doit avoir au moins 6 caractères.</div>
}
}
</form>
Dans cet exemple, nous avons utilisé @if
pour afficher un message d'erreur si le contrôle est considéré comme invalide et si le champ de formulaire a été modifié ou a reçu le focus (control.dirty || control.touched
). Nous avons également utilisé la méthode hasErrors
du contrôle pour vérifier les erreurs spécifiques qui ont provoqué l'invalidation du contrôle, et avons affiché des messages d'erreur correspondants.
Afficher les informations d'une erreur ​
Pour afficher les informations de l'erreur minlength
dans votre template HTML, vous pouvez accéder à la propriété requiredLength
de l'objet errors du contrĂ´le de formulaire. Voici comment cela pourrait ĂŞtre mis en Ĺ“uvre dans votre template HTML :
angular-html
<form>
<label>
Champ:
<input type="text" [formControl]="control">
</label>
<!-- Affichage des erreurs de validation -->
@if (control.invalid && (control.dirty || control.touched)) {
@if (control.hasError('required')) {
<div>Le champ est obligatoire.</div>
}
@if (control.hasError('minlength')) {
<div>Le champ doit avoir au moins {{ control.errors!.['minlength'].requiredLength }} caractères.</div>
}
}
</form>
Dans cet exemple, nous avons utilisé la propriété requiredLength
de l'objet errors
pour afficher le nombre de caractères minimum requis par le validateur minlength
.
Validateurs existants ​
Voici une liste des validateurs de formulaire couramment utilisés dans Angular, avec une brève explication de chacun :
Validateur | Description |
---|---|
Validators.required | Exige que le champ de formulaire soit renseigné (ne soit pas vide). |
Validators.minLength(n) | Exige que le champ de formulaire ait au moins n caractères. |
Validators.maxLength(n) | Exige que le champ de formulaire ait au plus n caractères. |
Validators.email | Exige que le champ de formulaire ait un format de courriel valide. |
Validators.pattern(regex) | Exige que le champ de formulaire respecte un motif spécifique défini par la expression régulière regex . |
Validators.nullValidator | Ne valide aucune valeur. Utilisé pour désactiver la validation d'un contrôle de formulaire. |
Validators.compose([]) | Prend en entrée un tableau de validateurs et renvoie un nouveau validateur qui exécute chaque validateur dans le tableau et renvoie une erreur si l'un d'eux échoue. |
Validators.min(n) | Exige que la valeur du champ de formulaire soit supérieure ou égale à n . |
Validators.max(n) | Exige que la valeur du champ de formulaire soit inférieure ou égale à n . |
Utiliser setValidators() et updateValueAndValidity() ​
Voici un exemple qui utilise la méthode setValidators()
et updateValueAndValidity()
pour ajouter des validateurs Ă un contrĂ´le de formulaire dans Angular :
ts
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [ReactiveFormsModule],
standalone: true,
template: `
<form>
<label>
Champ:
<input type="text" [formControl]="control">
</label>
</form>
`
})
export class FormComponent {
control = new FormControl('');
constructor() {
// Ajout d'un validateur de longueur minimale de 6 caractères au contrôle
this.control.setValidators(Validators.minLength(6));
// Mise à jour de la valeur et de la validité du contrôle
this.control.updateValueAndValidity();
}
}
Dans cet exemple, nous avons créé un contrôle FormControl avec la valeur initiale ''
(une chaîne vide) et avons ajouté le validateur Validators.minLength(6)
en appelant la méthode setValidators()
. Nous avons ensuite mis à jour la valeur et la validité du contrôle en appelant la méthode updateValueAndValidity()
.
Le contrôle ne sera considéré comme valide que si la valeur du champ de formulaire a au moins 6 caractères. Si la valeur est inférieure à 6 caractères, le contrôle sera considéré comme invalide et affichera une erreur de validation.