web-dev-qa-db-fra.com

Quelqu'un sait-il comment déclencher des validateurs de formulaire dans Angular2?

Dans angular2, je souhaite déclencher des validateurs pour certains contrôles lorsqu'un autre contrôle est modifié. Y a-t-il un moyen pour que je puisse simplement indiquer au formulaire de re-valider? Mieux encore, puis-je demander la validation de champs spécifiques?

Exemple: Compte tenu de la case à cocher X et de l’entrée P . L’entrée P a un validateur qui se comporte différemment en fonction de la valeur de modèle de X . Validator on P examinera le modèle pour déterminer l'état de X et validera P en conséquence.

Voici un code:

constructor(builder: FormBuilder) {
    this.formData = { num: '', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
    }
});

Quelqu'un a une solution? Merci!

formsvalidationangular
56
Bonneville

Je ne sais pas si vous cherchez toujours une réponse, alors voici mes suggestions:

Regardez ceci: Angular 2 - AbstractControl

Je pense que ce que vous pourriez faire est la suivante:

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});

Cela devrait déclencher et exécuter les validateurs. En outre, l'état est également mis à jour. Vous devriez maintenant pouvoir consulter la valeur de la case à cocher dans votre logique de validation.

J'espère que cela t'aides!

EDIT: lien et exemple mis à jour. Le code a changé pendant que j'écrivais ma réponse.

EDIT_2: alpha.48 remplace EventEmitter.observer en EventEmitter.subscribe!

EDIT_3: lien modifié vers l'implémentation réelle, lien ajouté vers les documents

Validaton-Guide

Documentation FormControl

55
Nightking

avec mon groupe de contrôle, je le fais parce que j’ai des erreurs de vérification si je les touche

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

(this.form est mon groupe de contrôle)

22
kernowcode

Il existe des méthodes plus élégantes de modélisation de ce comportement - par exemple, placer votre état dans un objet ReplaySubject et l'observer, puis utiliser des validateurs asynchrones observant l'état - mais l'approche pseudo-codée ci-dessous devrait fonctionner. Il vous suffit d'observer les changements de valeur dans la case à cocher, de mettre à jour le modèle, puis de forcer une nouvelle validation du nombreFld avec le cal updateValueAndValidity.

constructor(builder: FormBuilder) {
  this.formData = { num: '', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}
5
jmreidy

Avec l'aide de ce blog 

lien de blog

J'ai trouvé une solution avec la combinaison de Nightking answer

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderForm est le groupe de formulaires

2
Altair CA
static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}
0
pogiaron