web-dev-qa-db-fra.com

Erreur de suppression des formes réactives angulaires2

J'essaie de définir un statut de contrôle de formulaire sur valide

this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})

maintenant je veux supprimer cette erreur.

angularangular2-forms
11
Arman Gevorgyan

Définissez simplement la valeur dans l'objet d'erreur sur null:

this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: null})

Ou si vous souhaitez supprimer toute la validation du contrôle, utilisez setErrors(null) comme suggéré dans les commentaires.

7
unitario

Si je comprends bien, vous n'avez vraiment pas besoin d'utiliser la méthode setErrors lorsque vous pouvez créer des validateurs personnalisés . Vous pouvez facilement créer des validateurs personnalisés pour votre formControl ou formGroup. Dans votre validateur, vous devez simplement renvoyer un ValidatorFn et vous ne devez pas utiliser la méthode setErrors.

Pour plus d'informations sur le validateur personnalisé pour FormGroup, je vous suggère de lire cet article article qui a résolu mon problème.

Ceci est mon code de travail:

registerationForm = this.formBuilder.group({
  username: ['', [Validators.required, Validators.email]],
  passwords: this.formBuilder.group(
    {
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    },
    {
      validator: matchPassword
    }
  ),
  policyAgreement: ['', Validators.required]
});

// Outside my component:
const matchPassword = (group: FormGroup) => {
  const password = group.get('password').value;
  const confirmPassword = group.get('confirmPassword').value;
  return password != confirmPassword ? { matchPassword: true } : null;
};
6
Vahid

D'autres solutions ne semblent pas fonctionner. Il semble que le contrôle de pensée angulaire soit invalide tant que la propriété errors n'est pas nulle. 

Tant que vous voulez supprimer une seule erreur et laisser les autres, vous ne pouvez le faire que manuellement. Cette fonction ci-dessous supprimera une seule erreur spécifiée dans l'argument ale laisser les autres. Il s'assurera également que si vous supprimez l'erreur, le contrôle deviendra valide.

// call it in validator function if control is valid
removeError(this.currencyForm.controls['currencyMaxSell'], 'smallerThan');

//this function removes single error
    function removeError(control: AbstractControl, error: string) {
      const err = control.errors; // get control errors
      if (err) {
        delete err[error]; // delete your own error
        if (!Object.keys(err).length) { // if no errors left
          control.setErrors(null); // set control errors to null making it VALID
        } else {
          control.setErrors(err); // controls got other errors so set them back
        }
      }

N'hésitez pas à éditer cette question et à la rendre plus lisible. 

AVERTISSEMENT: Je l'ai testé en ANGULAIRE 6

5
karoluS

Pour supprimer une seule erreur de contrôle de formulaire lors de la validation manuelle, procédez comme suit:

this.myFormGroup.get('myControl').setErrors({'myCustomError':null})

Cela ne mettra à jour que la valeur de l'erreur spécifiée et n'effacera pas la validation précédente que vous auriez effectuée, contrairement à setErrors(null), qui annule l'objet d'erreurs entier pour le contrôle.

5
affbedran

En utilisant Angular 7, aucune des solutions présentées ici ne fonctionnait pour moi. 

Je devais gérer mon erreur manuellement dans mon validateur personnalisé qui fonctionne avec plusieurs champs de formulaire.

L'exemple ci-dessous vérifie si la différence entre deux champs de formulaire est suffisamment importante. Les champs de formulaire en question ont également plusieurs autres validateurs (lte, gte), donc effacer toutes les erreurs avec setError (null) était hors de question et essayer de supprimer mon erreur spécifique avec setError ({minDifference : null}) a toujours laissé le formulaireContrôle dans un état non valide.

minDifference(firstKey: string, secondKey: string, minDifference: number) {
  return (c: AbstractControl): {[key: string]: any} => {
    if (!c.get(firstKey).value || !c.get(secondKey).value ||
      Math.abs(c.get(firstKey).value - c.get(secondKey).value) >= minDifference) {
      // If there is only one error and it's this one then remove all errors from the control (removing 1 does not work)
      if (c.get(secondKey).hasError('minDifference')) {
        // If previously our error has been set, remove it.
        delete c.get(secondKey).errors.minDifference;
        // If no errors remain after, set the control to be valid.
        if (Object.keys(c.get(secondKey).errors).length === 0) {
          c.get(secondKey).setErrors(null);
        }
      }
      return null;
    }
    // Condition was not met, add our error to the alreadying existing ones.
    c.get(secondKey).setErrors( {...c.get(secondKey).errors, ...{ minDifference: true}} )
  }
}

Pour être honnête, je n'aime pas vraiment ma solution, je m'attendrais à pouvoir résoudre ce problème beaucoup plus simplement, mais je n'ai pas trouvé le moyen de le faire.

2
barney.balazs

Si vous définissez manuellement l'erro, vous pouvez utiliser setValue () pour le rendre à nouveau valide.

if(myCurrency is smallerThanOther){
 this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
} else {
 this.currencyForm.controls['currencyMaxSell'].setValue(myCurrency);
}
2
Marcio LSA

Vous aurez besoin d'un mélange de la meilleure réponse ici et de la réponse dans les commentaires afin d'obtenir votre formulaire pour supprimer l'erreur et devenir valide pour une nouvelle soumission:

if (this.currencyForm.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}

Si l'erreur concerne un contrôle spécifique du formulaire, incluez le contrôle de formulaire:

if (this.currencyForm.controls.currencyMaxSell.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}
0
Code Janitor