Angulaire Dynamiquement ajouter/supprimer des validateurs

J'ai un FormGroup défini comme ci-dessous:

this.businessFormGroup: this.fb.group({
    'businessType': ['', Validators.required],
    'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])],
    'income': ['']
  })

Maintenant, quand businessType est Other , je veux supprimer Validators.required validateur de description. Et si businessType n'est pas Other, je veux ajouter le Validators.required.

Je suis en utilisant le code ci-dessous pour ajouter dynamiquement/supprimer le Validators.required. Cependant, il efface l'existant Validators.maxLength validateur.

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').validator = <any>Validators.compose([Validators.required]);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

this.businessFormGroup.get('description').updateValueAndValidity();

Ma question est, comment puis-je conserver les validateurs lors de l'ajout/retrait de la required validateur.

les validateurs de stockage comme un tableau , vous aurez besoin de gérer la liste des validateurs appliqué par vous-même
malheureusement, ce n'est pas possible, angulaire semble fusionner les appliquer validateurs en interne, par conséquent, vous pouvez uniquement appeler clear et set fonctions
c'est faux, les validateurs sont composés en une seule fonction et c'est tout. Avec l'implémentation actuelle de l'API, il n'est pas possible de vérifier les validateurs sont définies pour un contrôle

InformationsquelleAutor A J Qarshi | 2018-03-02

23

Des formes angulaires ont une fonction intégrée setValidators() qui permet programmatique cession de Validateurs.

Pour votre exemple que vous pouvez faire:
```
if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.controls['description'].setValidators([Validators.required, Validators.maxLength(200)]);              
} else {                
    this.businessFormGroup.controls['description'].setValidators([Validators.maxLength(200)]);               
}
```
Il est important de garder à l'esprit que en utilisant cette méthode vous permettra de remplacer votre existant validateurs de sorte que vous aurez besoin d'inclure tous les validateurs vous avez besoin/envie pour le contrôle que vous réinitialisation.
- notez que le setValidators écrasera déjà programmés validateurs, ce qui signifie que le maxLength sera écrasé et ne sera pas régénéré avec cette approche
- Merci @Jota.Toledo. C'est un comportement importants à connaître. Mise à jour de la réponse à l'inclure.
- Je pense que l'utilisation d'un customValidator qui tiennent compte de bussinesType et de la description est un "plus naturel" idée que de supprimer/ajouter des validateurs
- vous avez raison que le fait d'avoir un validateur personnalisé est la meilleure approche, mais dans mon cas, j'ai les règles de validation définie dans un fichier json et je suis à la recherche d'une plus générique de la mise en œuvre et la solution fournie par Narm est probablement la voie à suivre.
InformationsquelleAutor Narm

Ce un travail pour moi

   onAddValidationClick(){
         this.formGroup.controls["firstName"].setValidators(Validators.required);
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }

onRemoveValidationClick(){
         this.formGroup.controls["firstName"].clearValidators();
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }

InformationsquelleAutor San Jaisy

3

L'approche naïve serait de définir les validateurs du contrôle à chaque fois que la variable de condition changements. Mais nous pouvons faire mieux en utilisant une indirection + programmation fonctionnelle.

Tenir compte de l'existence d'un descriptionIsRequired de lecture, qui agit comme un boolan drapeau.

Idées:
- Créer un validateur personnalisé fonction qui prend la descriptionIsRequired comme argument et selon qu'il valide un contrôle obligatoire + maxLength ou maxLength.
- Lier le validateur personnalisé à la description de contrôle de telle sorte que, lorsque la validité du contrôle est évaluée, la valeur la plus récente de descriptionIsRequired doit être envisagée.
Le premier point est assez simple à mettre en œuvre:
```
function descriptionValidator(required: boolean): ValidatorFn {
  return (formControl: FormControl): ValidationErrors => {
    if (required) {
      return Validators.compose([Validators.required, Validators.maxLength(200)])(formControl);
    } else {
      return Validators.maxLength(200)(formControl);
    }
  }
}
```
Avis que c'est une auto encapsulée fonction.

Le deuxième point est un peu plus délicat, mais à la fin il ressemble à ceci:
```
export class FooComponent {
  constructor(){
    this.form = fb.group({
      description: ['initial name', this.validator()]
    });
  }

  private get descriptionIsRequired(): boolean {
   ...
  }

  private validator(): ValidatorFn {
    return (c: FormControl): ValidationErrors => descriptionValidator(this.descriptionIsRequired)(c);
  }
}
```
Une petite explication de ce qui se passe:
- la validator méthode retourne une fonction
- la fonction renvoyée par validator pourrait être considéré comme un usine méthode: à chaque fois que son invoquée, renvoie une nouvelle fonction, plus précisément, une nouvelle instance de notre descriptionValidator en utilisant le plus récent descriptionIsRequired valeur.
Une démo en live dans la suite de stackblitz
- +1 C'est valable solution mais je suis à la recherche d'une plus générique de la mise en œuvre comme mes règles de validation sont définies dans un fichier json.
- Je me demande ce que tu veux dire par générique dans ce contexte. La seule façon que je vois pour que cela soit généralisé, c'est que vous avez une collection de validateurs V qui doivent toujours être active dans un contrôle. D'où ils viennent n'est pas pertinent. Alors vous avez une autre collection de validateurs Vop, dans ce cas, une collection avec seulement nécessaire en elle, qui peut et ne peut pas être actif dans un contrôle en fonction d'une condition booléenne. Suis-je le droit? Si non, veuillez expliquer plus en détail quel est votre concept de "générique" de la mise en œuvre.
- cheers! cela m'a donné une bonne idée de faire quelque chose de générique que j'avais à faire
InformationsquelleAutor Jota.Toledo

Peut-être que cela aide:

L'Ajout De Validateurs.nécessaire à la validatorset d'un AbstractControl:

if (c.validator !== null) {
        c.setValidators([c.validator, Validators.required])
  } else {
        c.setValidators([Validators.required])
  }

InformationsquelleAutor Rob

Quiconque cherche toujours une réponse, vous pouvez le faire comme ceci ,poignée en ngOnInit() ou n'importe quel endroit que vous aimez.

   const validators = formGroup.validator; /* or control.validator */

   const newValidator = CustomValidator.checkUserNameValidity(); 

   /* Add to existing validator */

   if(validator) {
      formGroup.setValidators([validators, newValidator])
   } else {. /* if no validators added already */
      formGroup.setValidators([newValidator]);
   }

Suivre la samething pour asyncValidator ainsi.

InformationsquelleAutor sudharsan tk

Vous devez vous connecter pour publier un commentaire.