J'ai une forme orientée modèle angulaire. et je veux réinitialiser toutes les erreurs de validation et les rendre intactes sans réinitialiser le formulaire. Comment faire ça en angulaire? J'ai essayé la méthode suivante
onAdd(form: NgForm) {
form.form.markAsPristine();
form.form.markAsUntouched();
}
mais cela ne fonctionne pas.
lien: - https://stackblitz.com/edit/angular-ezixd4
comportement actuel: - lorsque je clique pour soumettre un formulaire vide, tout le champ est marqué avec une erreur et lorsque je clique sur add il ajoute le champ mais la fonction ci-dessus ne supprime pas le message d'erreur.
comportement attendu: - lorsque je clique pour soumettre un formulaire vide, tout le champ est marqué avec une erreur et lorsque je clique sur add il ajoute le champ et il doit supprimer le message d'erreur sur le formulaire (ou dans les fichiers ajoutés).
Dans ce formulaire, j'ajoute un champ de saisie avec le bouton d'ajout et je souhaite effacer tout message d'erreur avant que l'utilisateur n'ait la possibilité d'interagir avec le formulaire.
7 Réponses :
Vous pouvez simplement parcourir chaque champ requis et appeler leur méthode setErrors tout en leur passant null :
this.loginForm.controls.username.setErrors(null); this.loginForm.controls.password.setErrors(null);
par exemple lorsque vous avez un champ username et password :
YOUR_FORM.controls.YOUR_FIELD_NAME.setErrors(null);
J'espère que cela t'aides!
Je crois qu'il n'affiche que des erreurs et empêche l'envoi du formulaire si le formulaire est touché. S'il marque la forme comme vierge et intacte, sa logique devrait réellement fonctionner.
merci pour votre réponse, mais cela supprime complètement l'erreur, je veux que l'erreur réapparaisse si l'utilisateur n'interagit toujours pas avec le formulaire, mais de l'approche ci-dessus, il supprime complètement l'erreur et permet au formulaire de se soumettre.
Votre formulaire peut-il vraiment être soumis après avoir supprimé toutes les erreurs? Avec mon formulaire, une erreur réapparaît lorsque je soumets à nouveau mon formulaire car dans mon auditeur d'envoi, il est vérifié si la propriété de formulaire invalide est vraie ou fausse. La validation de formulaire et les valeurs de champ ne sont en fait pas supprimées mais uniquement les messages d'erreur.
la classe mat-input-invalid dépend en partie de l'état submitted du formulaire. Ainsi, lorsque vous soumettez le formulaire, la propriété submitted devient true. markAsPristine() ou markAsUntouched() ne réinitialise pas l'indicateur submitted , ainsi les erreurs markAsUntouched() toujours. Je vois deux possibilités. Un rapide et sale, qui lorsque je l'ai testé semble fonctionner dans votre cas. Je ne peux pas promettre que cela fonctionnera dans tous les cas, mais vous pouvez expérimenter avec et voir si cela fonctionnera. C'est, vous appelez resetForm() qui ne réinitialise la submitted propriété. Mais oui, vous souhaitez conserver les valeurs qui sont définies .. donc, nous passons la valeur de l'état actuel du formulaire dans la réinitialisation:
onAdd(form: NgForm) {
this.specification.push(++this.num);
form.resetForm(form.value);
}
C'était donc la manière sale, une manière plus contrôlée serait d'utiliser ErrorStateMatcher , qui est également mentionné dans la documentation . Avec cela, vous pouvez choisir quand afficher les messages d'erreur.
oui, cela a du sens, je veux en fait supprimer l'erreur du champ nouvellement ajouté avant que l'utilisateur n'ait une chance d'interagir avec lui.
Assurez-vous qu'il n'y a pas de bouton dans la section du formulaire. Addnew bouton Addnew doit être hors de la forme.
Veuillez revoir cette réponse pour qu'elle soit en anglais.
Vous pouvez le faire d'une manière plus générique:
reset(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(
field => {
formGroup.get(field).setErrors(null);
}
);
}
...
this.reset(yourForm);
...
resetForm() {
this.myFormGroup.reset();
this.myFormGroup.setErrors(null); // could be removed
this.myFormGroup.updateValueAndValidity();
}
Cela a finalement fonctionné pour moi:
this.form.reset();
Object.keys(this.form.controls).forEach(key => {
this.form.get(key).setErrors(null) ;
});
Je devais faire cela, mettre un délai d'attente pour que l'événement de flou avant de cliquer sur un bouton ne soit pas géré après le clic sur le bouton d'annulation:
let timeout = setTimeout(function() {
Object.keys(originalValues).forEach(controlName => {
let control =that.getControl(controlName);
control.setValue(originalValues[controlName]);
control.markAsUntouched();
control.setErrors(null);
control.markAsPristine();
});
this.setControlState(formName);
clearTimeout(timeout);
}, 10);
Essayez ceci avec
@ViewChild()et vous trouverez plus d'informations sur le lien donnéDonc, si votre formulaire n'est pas valide (en raison de valeurs non valides dans les contrôles) et que vous le rendez vierge mais que vous ne supprimez pas les valeurs non valides, votre formulaire ne sera-t-il toujours pas invalide.
J'ai essayé
@ViewChild()mais cela ne fonctionne toujours pas.@xyz oui mais c'est pourquoi je veux le rendre intact, et si l'utilisateur clique à nouveau avec la valeur invalide, l'erreur réapparaîtra.
La vraie raison pour laquelle je veux avoir ce comportement parce que
add buttonchamp de saisie dynamiquement par leadd buttonpuisque le champ de saisie nouvellement ajouté sera vide, alors il affiche une erreur avant que l'utilisateur n'ait une chance d'interagir avec lui.@rahulKushwaha donc, cela devrait fonctionner. Veuillez montrer comment vous ajoutez un nouveau champ de saisie.
Votre code fonctionne parfaitement, il suffit de l'essayer. Veuillez créer un stackblitz présentant le problème.
@ AJT_82 là vous allez, j'ai ajouté stackblitz.
Yaah, le code est un peu différent de ce que vous avez montré, ou dirons-nous qu'il n'était pas complet avant. Maintenant, je vois le problème. Je vais voir si je peux trouver quelque chose, vous faire savoir si je le fais :) Je pense que j'ai déjà vu ça, mais je vais quand même vérifier si j'ai raison.