Angular Comment ajouter un validateur à FormControl après la création du contrôle?

Question

Nous avons un composant qui a une forme construite dynamiquement. Le code pour ajouter un contrôle avec validateurs pourrait ressembler à ceci

 var c = new FormControl('', Validators.required);
 

Mais disons que je veux ajouter un deuxième validateur plus tard . Comment pouvons-nous accomplir cela? Nous ne trouvons aucune documentation sur ce site en ligne. J'ai trouvé cependant dans les contrôles de formulaire il y a setValidators

 this.form.controls["firstName"].setValidators 
 

mais il n'est pas clair comment ajouter un nouveau validateur ou un validateur personnalisé.

Merci beaucoup.

Answer 1

Vous transmettez simplement à FormControl un tableau de validateurs.

Voici un exemple montrant comment vous pouvez ajouter des validateurs à un FormControl existant:

 this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);
 

Notez que cela réinitialisera tous les validateurs existants que vous avez ajoutés lors de la création du FormControl.

Answer 2

Pour ajouter à ce que @Delosdos a posté.

Définir un validateur pour un contrôle dans les FormGroup : this.myForm.controls['controlName'].setValidators([Validators.required])

Supprimez le validateur du contrôle du groupe de formulaires: this.myForm.controls['controlName'].clearValidators()

Mettez à jour le groupe de formulaires une fois que vous avez exécuté l'une des lignes ci-dessus. this.myForm.controls['controlName'].updateValueAndValidity()

C’est un moyen extraordinaire de définir par programme votre validation de formulaire.

Answer 3

Si vous utilisez reactiveFormModule et que vous avez défini formGroup comme suit:

 public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});
 

que vous puissiez ajouter un nouveau validateur ( et conserver les anciens ) à FormControl avec cette approche:

 this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);
 

FormControl.validator renvoie un validateur composé contenant tous les validateurs définis précédemment.