J'utilise une forme réactive avec Angular Material. Quand je clique sur onsubmit (), je veux que tous les paramètres qui n'ont pas de valeur ne s'affichent pas avec une erreur (ligne rouge)
J'essaye d'utiliser this.formGroup.markAsUntouched(); mais cela n'a pas fonctionné.
Quand je n'utilise pas de matériau angulaire, cela fonctionne. Est-ce que quelqu'un sait comment faire les choses correctement avec le matériau angulaire?
<form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">
<mat-form-field class="form-element">
<input matInput placeholder="Emailaddress" formControlName="email">
</mat-form-field>
</form>
onSubmit(post) {
this.formGroup.markAsUntouched();
}
Le formGroup restera intact mais les lignes rouges apparaissent toujours.
3 Réponses :
Si vous obtenez un soulignement rouge, vous pouvez réinitialiser toutes les erreurs this.formGroup.setErrors(null);
Merci pour votre réponse. c'est du travail mais le problème avec cette solution est que le nécessaire est également supprimer. le comportement par défaut est lorsque vous entrez dans le champ et que vous sortez (sans rien écrire), la ligne rouge s'affiche et après setErrors (null), la ligne rouge ne s'affiche pas.
formReset(formGroup: FormGroup) {
formGroup.control.reset();
formGroup.control.markAsPristine();
formGroup.control.markAsUntouched();
}
// for safety measure try calling this function in a try-catch block, it works on a reactive forms
Veuillez ne pas publier uniquement le code comme réponse, mais également expliquer ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement plus utiles et de meilleure qualité, et sont plus susceptibles d'attirer des votes positifs.
Utilisez cette approche pour supprimer tous les messages d'erreur
this.mygroup.controls.frmCtrlMyControl.setErrors(null);
Ou pour supprimer individuellement tout message
Object.keys(this.mygroup.controls).map((field) => {
const control = this.mygroup.get(field);
if (control instanceof FormControl) {
control.setErrors(null);
}
});