web-dev-qa-db-fra.com

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

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 validateur nouveau ou personnalisé.

angularformsangular-reactive-forms
53
melegant

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.

68
Andy-Delosdos

Pour ajouter à ce que @Delosdos a posté.

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

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

Mise à 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.

48
shammelburg

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('[email protected]', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

que vous puissiez ajouter un nouveau validateur (et en 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.

34
Eduard Void

Je pense que la réponse choisie n'est pas correcte, car la question initiale était "comment ajouter un nouveau validateur après avoir créé le formulaireContrôle".

Pour autant que je sache, ce n'est pas possible. La seule chose que vous puissiez faire est de créer dynamiquement le tableau de validateurs.

Mais ce qui manque, c’est d’avoir une fonction addValidator () pour ne pas écraser les validateurs déjà ajoutés au formulaireControl. Si quelqu'un a une réponse à cette exigence, il serait agréable d'être posté ici.

1
user2992476