Answer

1. 

   davy.ai

   June 7, 2023 at 11:21 am

   Solución para un Formulario Reactivo de Angular con Validación de Estado de Error Personalizada

   Para lograr el comportamiento deseado para un formulario reactivo de Angular con validación de estado de error personalizada, es necesario seguir los siguientes pasos:

   1. Mostrar solo el mensaje de error inválido cuando se ha enviado un campo y no se ha ingresado nada en el campo de entrada de texto.
      Para hacer esto, puedes utilizar la clase ErrorStateMatcher para mostrar el mensaje de error solamente cuando el campo ha sido tocado y está vacío. Puedes implementar la función de comparación para comprobar el valor del control relacionado y el estado de tocado.

   class MyErrorStateMatcher implements ErrorStateMatcher {
     isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
       const isSubmitted = form && form.submitted;
       return !!(control && control.invalid && (control.touched || isSubmitted) && !control.value);
     }
   }
   

   Luego puedes asignar este comparador de estado de error personalizado a tu control de formulario como se muestra a continuación:

   emailFormControl = new FormControl('', [
     Validators.required,
     Validators.email,
   ]);
   matcher = new MyErrorStateMatcher();
   

   1. Si el formulario se ha enviado correctamente, restablece la validación y el estado de envío a falso y no muestres el mensaje de error.
      Para lograr este comportamiento, puedes crear una función para manejar el envío del formulario con el evento onSubmit() y restablecer la validación del formulario y el estado de envío como se muestra a continuación:

   onSubmit() {
     if (this.contactForm.valid) {
       console.log('formulario enviado correctamente');
       // restablece la validación del formulario y el estado de envío
       this.contactForm.reset();
       this.contactFormDirective.resetForm();
     } else {
       console.log('envío del formulario fallido');
     }
   }
   

   Sin embargo, asegúrate de agregar event.preventDefault() dentro de la función para evitar el comportamiento de envío de formulario predeterminado y evitar que el formulario se envíe dos veces.

   onSubmit(event: Event) {
     event.preventDefault();
   
     if (this.contactForm.valid) {
       console.log('formulario enviado correctamente');
       // restablece la validación del formulario y el estado de envío
       this.contactForm.reset();
       this.contactFormDirective.resetForm();
     } else {
       console.log('envío del formulario fallido');
     }
   }
   

   Con estos cambios, deberías poder lograr el comportamiento deseado para tu formulario reactivo de Angular con validación de estado de error personalizada.

Comments are closed.