Using nested object names in formik/<ErrorMessage/>

1
votes

Formik's documentation states you can use a lodash type dot path to name/access nested objects (e.g. name.firstName). This is also supposed to apply to it's built in <ErrorMessage/> component. I was working with a React-Typescript tutorial app that uses formik for form inputs and it seemed to work fine under the hood when paired with backend code, but I did notice that the fields that fed nested object values would not throw any errors in the UI. The error itself would be generated, but the <ErrorMessage/> component didn't seem to want to render.

A pared down version of the app is below. The "Field is Required" error should be thrown if you exit a form field without a valid input but again it doesn't work for the nested object fields (first/last name). I was wondering if anyone else has run across this issue. It's a little annoying.

I've seen that formik seems to be paired frequently with Yup for validation, which may make this issue moot, but I haven't gotten quite that far yet. Thanks!

import React from 'react';
import ReactDOM from 'react-dom';

import { ErrorMessage, Field, FieldProps, Formik } from "formik";
import { Form, Button } from "semantic-ui-react";

interface TextProps extends FieldProps {
  label: string;
  placeholder: string;
}

const TextField: React.FC<TextProps> = ({
  field, label, placeholder
}) => (
  <Form.Field>
    <label>{label}</label>
    <Field placeholder={placeholder} {...field} />
    <div style={{ color: "red" }}>
      <ErrorMessage name={field.name} />
    </div>
  </Form.Field>
);

const App: React.FC = () => {

  return (
    <Formik 
    initialValues={{
      name: {
        firstName: "",
        lastName: ""
      },
      job: "",
    }}
    onSubmit={()=>console.log("submitted")}

    validate={values => {
      const requiredError = "Field is required";
      const errors: { [field: string]: string } = {};
      if (!values.name.firstName) {
        errors["name.firstName"] = requiredError;
      }
      if (!values.name.lastName) {
        errors["name.lastName"] = requiredError;
      }
      if (!values.job) {
        errors["job"] = requiredError;
      }
      return errors;
    }}
    >
    {({ isValid, dirty}) => {
      return (
      <Form>
        <Field label="First Name" name="name.firstName" component={TextField} />
        <Field label="Last Name" name="name.lastName" component={TextField} />
        <Field label="Job" name="job" component={TextField} />

        <Button type="submit" disabled={!dirty || !isValid}> Add</Button>
      </Form>
      );
    }}
    </Formik>
  );
};
2
javascriptreactjsformsvalidationformik
Hello Ray, I am currently having this issue. Were you able to find the solution? – Paullo
No, it didn't greatly impact the app and I didn't know enough (still don't really...) to try to dig into it more. If I were to go back I'd probably look into Yup for some backup validation methods, but it fell to the backburner quickly. – Ray Oh
Kay! I was able to figure mine out, it happened in my case the error messages were there but cos I was using Bootstrap class invalid-feedback which also depended on is-invalid of the input element and contain div to render. You can inspect your code if the error message is generated at all. I can guide u on how i was able to solve this – Paullo

2 Answers

0
votes

Have you tried using formik's inbuilt function getIn()? It is used to extract values from deeply nested objects. Check this Q&A

0
votes

Try changing validate function to this

validate={values => {
  const requiredError = "Field is required";
  const errors: any = {name: {}};
  if (!values.name.firstName) {
    errors.name.firstName = requiredError;
  }
  if (!values.name.lastName) {
    errors.name.lastName = requiredError;
  }
  if (!values.job) {
    errors["job"] = requiredError;
  }
  return errors;
}}