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.

  • es.davy.ai/
  • Programación /
  • ¿Por qué no puedo establecer un error en el campo de Formik utilizando setFieldError o setError?

¿Por qué no puedo establecer un error en el campo de Formik utilizando setFieldError o setError?

29 Jul, 2023 Programación

Estoy usando Formik en mi aplicación React Native de la siguiente manera:
En el constructor this.myRef = React.createRef();

La creación de mi componente de formulario es así:

<appform innerref="{this.myRef}" initialvalues="{{" currentpassword:="" '',="" newpassword:="" '',="" confirmpassword:="" ''="" }}="" validationschema="{validationSchema}" onsubmit="{()" ==""> ''}
    >

` this.setState({ mostrarContraseñaActual: !mostrarContraseñaActual })}
/>

Donde AppForm es el componente personalizado del formulario Formik y AppFormField es un componente personalizado.

(Estoy usando una referencia porque estoy enviando el formulario con un botón Guardar fuera del componente del formulario)

Llamo a la función handle submit de esta manera onBtnPress={() => this.handleSubmit()}

Y finalmente la función handleSubmit donde quiero establecer el error.

handleSubmit = async () => {

`this.myRef.current?.submitForm();
this.myRef.current.setErrors({currentPassword: ‘Hola’});
this.myRef.current.setFieldError(‘currentPassword’, ‘Hola’); // He intentado ambas formas
console.log(‘CurrentRef’, this.myRef.current);
“`
}

He intentado tanto setErrors como setFieldError y espero que Formik establezca el error “Hola” en el campo ‘currentPassword’, pero no he podido hacerlo. Por favor, dime si hay algún error y cuál es la forma correcta.

¡Gracias!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error aquí es que estás tratando de establecer los errores después de enviar el formulario usando this.myRef.current.submitForm(). Según la documentación de Formik, submitForm() activa el proceso de validación y la función de devolución de llamada onSubmit solo si el formulario es válido. Entonces, si quieres establecer errores manualmente, debes hacerlo antes de llamar a submitForm().

    Aquí está la función handleSubmit corregida:

    handleSubmit = async () => {
    this.myRef.current.setErrors({currentPassword: 'Hola'});
    this.myRef.current.setFieldError('currentPassword', 'Hola');
    console.log('CurrentRef ', this.myRef.current);
    this.myRef.current?.submitForm();
}

    Al establecer los errores antes de enviar el formulario, le estás diciendo a Formik que invalide el campo y muestre el mensaje de error. Ten en cuenta que setErrors y setFieldError hacen lo mismo, pero setFieldError es solo una forma abreviada de establecer errores para un campo específico.

Comments are closed.