CODEWITHSUNDEEP
reactjsreact-bootstrapformik
Greg-A
Greg-A

Reputation: 862

How to handle error.touched and errors with an object in Formik

I have an object that I integrate in a form with Formik

 const obj = {
   address: {
     line1: 'Street1',
     line2: 'Street2',
     line3: 'Street3'
  }

When I create the formik.group I am faced with a problem with the value control.

      <Form.Control
              value={formikProps.values.address.line2}
              onChange={formikProps.handleChange}
              onBlur={formikProps.handleBlur}
              type="text"
              name="address.line2"
              aria-label="address line 2"
              isInvalid={
                !!formikProps.touched.address.line2 &&
                !!formikProps.errors.address.line2
              }
               />

if I add isInvalid I end up with an error :

 TS2339: Property 'line2' does not exist on type 'boolean | FormikTouched<any> | FormikTouched<any>[]'.

Property 'line2' does not exist on type 'false'.

if I remove the isInvalid there is no problem modifying the text field.

How to integrate an object into the isInvalid control? If you have an idea ?

   isInvalid={
            !!formikProps.touched.address.line2 &&
            !!formikProps.errors.address.line2
          }

Upvotes: 0

Views: 1601

Answers (1)

user2463394
user2463394

Reputation: 36

try:

isInvalid={
                !!formikProps.touched.address?.line2 &&
                !!formikProps.errors.address?.line2
              }

Upvotes: 2

Related Questions