Comment ajouter dynamiquement des validateurs aux formulaires dans Angular 2 - 4 en utilisant FormBuilder?

Question

J'utilise FormBuilder pour construire un formulaire:

this.myForm = this.fb.group({ 
    'name': new FormControl(null, Validators.min(5)), 
    'description': new FormControl(null, Validators.min(60)) 
}); 

Le problème est que je dois aussi valider si elle est nécessaire et je l'obtenir de la configuration par une carte construite comme ceci:

map = new Map<string, boolean>(); 
map.set('name', true); 
map.set('description', false); 

Le problème peut être résolu comme suit:

this.myForm = this.fb.group({ 
    'name': this.map.get('name') ? new FormControl(null, Validators.compose([Validators.required, Validators.min(5)])) : new FormControl(null, Validators.min(5)), 
    'description': this.map.get('description') ? new FormControl(null, Validators.compose([Validators.required, Validators.min(60)])) : new FormControl(null, Validators.min(60)) 
}); 

qui fonctionne imaginer, mais dans une grande application avec plusieurs formes avec beaucoup de champs réels est inconfortable de cette façon de le faire. Idéalement, cela ressemblerait à ceci:

Object.keys(this.myForm.controls).forEach(key => { 
    if (map.get(key)) { 
    this.myForm.get(key).setValidators(this.myForm.get(key).getValidators().push(Validators.required)) 
    } 
}); 

Bien sûr, cela ne fonctionne pas. Donc, si quelqu'un qui a déjà résolu cela ou a un bon moyen de faire ce qui est décrit ci-dessus, je vais vous remercier beaucoup. Merci d'avance!!!

Mise à jour: Le problème peut être réduit à "comment obtenir tous les validateurs associés à un FormControl". Je ne pense pas qu'il y ait une solution définitive à cette question ->https://github.com/angular/angular/issues/13461

Answer 1

ici est une solution simple, je l'ai expliqué dans les commentaires:

Object.keys(this.myForm.controls).forEach(key => { 
     // if it needs to be required 
     if (map.get(key)) { 
      // you have first to check if it already contains validator.required. 
      let validators = this.myForm.controls[key].validator(this.myForm.controls[key]); 
      // if it contains it -> {required: true}; 
      // if it doesn't contains it you can now add the required validator 
      if(validators && !validators.required){ 
       let exisitingValidators = this.myForm.controls[key].validators;   
       this.myForm.controls[key].setValidators(Validators.compose([...existingValidators ,Validators.required])); 
       // call updateValueAndValidity to apply the new validators on the control 
       this.myForm.controls[key].updateValueAndValidity();     
     } 
    }); 

Hope it helps :)

Answer 2

Juste nettoyé/refactorisé au-dessus du code. Créer une fonction de composition Veuillez regarder

// composer function 
const composer = (control: FormControl, ...validators) => { 
    control.setValidators(Validators.compose([...validators])); 
} 

for (let name of Object.keys(grp)) { 
    let control = this.heroForm.controls[name]; 
    if (map.has(name)) { 
    let validators = control.validator(control); 
    if (validators && !validators.required) { 
     let exisitingValidators = control.validators; 
     composer(control, ...exisitingValidators, Validators.required); 
    } 
    } 
}