Why does Formik never recognize my Ionic IonInput values?

Question

I'm using Ionic 7, React 18, and Formik 2.4.5. Does Ionic work with Formik? I tried creating a very simple form with just a first and last name ...

const MyComponent: React.FC<MyComponentProps> = ({  }) => {



  const validationSchema = Yup.object({
    firstName: Yup.string().required('First Name is required'),
    lastName: Yup.string().required('Last Name is required')
    // Add other fields to validate here
  })

  return (
    <Formik
      initialValues={{
        firstName: null,
        lastName: null
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2))
      }}
    >
      {(formikProps) => (
        <>
          <strong>Sender Information</strong>

          <form onSubmit={formikProps.handleSubmit}>
            <IonInput placeholder='First Name' value={formikProps.values.firstName} onIonChange={formikProps.handleChange} />
            {formikProps.touched.firstName && formikProps.errors.firstName ? <div>{formikProps.errors.firstName}</div> : null}
            <IonInput placeholder='Last Name' value={formikProps.values.lastName} onIonChange={formikProps.handleChange} />
            {formikProps.touched.lastName && formikProps.errors.lastName ? <div>{formikProps.errors.lastName}</div> : null}

            <button type='submit'>Submit</button>
          </form>
        </>
      )}
    </Formik>
  )
}

export default MyComponent

However clicking "Submit" always results in the error messages displaying even if I have typed text into them . When I remove the "validationSchema" property, I see my submit handler called, however, the values for the two fields are always empty even if I have entered text into them. Curious if Formik is something that is meant to work with React at all.

Answer 1

Yes, Formik can be used with React and Ionic to manage and validate form state. The issue you're facing as per the code is related to the way the onIonChange event is handled for the IonInput component. The event object provided by onIonChange is different from the standard React onChange event. As a result, Formik is unable to capture the changes correctly, leading to errors in displaying validation messages and submitting the form.

Now, to fix the issue, the onIonChange event handler should use Formik's setFieldValue function, which manually updates the field values when the event is triggered. Additionally, I added the name attribute to the IonInput components.

<IonInput
  name='firstName'
  placeholder='First Name'
  value={formikProps.values.firstName}
  onIonChange={(e) => formikProps.setFieldValue('firstName', e.detail.value)}
/>
{formikProps.touched.firstName && formikProps.errors.firstName ? (
  <div>{formikProps.errors.firstName}</div>
) : null}
<IonInput
  name='lastName'
  placeholder='Last Name'
  value={formikProps.values.lastName}
  onIonChange={(e) => formikProps.setFieldValue('lastName', e.detail.value)}
/>
{formikProps.touched.lastName && formikProps.errors.lastName ? (
  <div>{formikProps.errors.lastName}</div>
) : null}

CODE DEMO

Suggestion:

You should consider looking at React-hook-forms library as well. It is lightweight, and compatible with Ionic, React.

References:

1. Comparison of Formik and React-hook-forms

2. Github issue