es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La validación de React Hook Form con TextField de Material UI no está funcionando.

06 Jun, 2023 Programación

Estoy tratando de crear un formulario con React Hook Form con el TextField de Material UI. Parece que lo configuré correctamente, pero el mensaje de error no aparece y no sé por qué. Solo puse las partes principales del código.

“`
import { TextField } from “@material-ui/core”;
import { Controller, useForm } from “react-hook-form”;

type NovoSinistroForm = {
codigoCobertura: number;
telefoneResponsavel: string;
evento: number;
dataEvento: Date;
dataEstimadaColheita: Date;
areaAtingida: number;
nomeComunicante: string;
nomeResponsavelVistoria: string;
relacaoComunicanteResponsavel: string;
emailComunicante: string;
telefone1Comunicante: string;
telefone2Comucante: string;
}

const {
control,
formState,
handleSubmit,
watch,
} = useForm();

(

)}
/>

OnBlur no parece que se esté ejecutando

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el evento onBlur no se está activando al utilizar el TextField de Material UI con React Hook Form.

    Una posible razón puede ser que el componente TextField no esté pasando correctamente el evento onBlur al componente Controller.

    Para solucionar este problema, puedes intentar agregar la propiedad onBlur al componente TextField y pasarla al objeto field en la función render del componente Controller, como se muestra a continuación:

    render={({
        field,
        fieldState: { invalid, isTouched, isDirty, error },
        formState,
    }) => (
        <textfield {...field}="" innerref="{field.ref}" label="Responsável por vistoria" type="text" inputlabelprops="{{" shrink:="" true,="" }}="" error="{invalid" &&="" istouched}="" helpertext="{error?.message}" onblur="{field.onBlur}"></textfield>
    )}

    Esto asegurará que el evento onBlur se pase correctamente al componente Controller y active la validación y la visualización del mensaje de error.

    Además, asegúrate de haber configurado correctamente las reglas para el campo requerido y de que la función onSubmit esté pasando correctamente los datos a ser enviados.

Comments are closed.