Update "form.touched" to suport nested fields

[dccarmo]

Related to #368

Bug, Feature, or Question?

Bug

Current Behavior

FormikTouched only allows one level of nesting. TypeScript complains if it's nested further:

[ts] Property 'name' does not exist on type 'boolean'.

Desired Behavior

With the "Deep State" update I'd think that nested fields would also work.

Suggested Solutions

Not sure if this is an implementation issue or a TypeScript definition issue.

Info

• Formik Version: 0.11.7
• OS: macOS
• Node Version: 8.4.0
• Package Manager and version: npm 5.6.0

[jaredpalmer]

This is a typescript issue.

[jaredpalmer]

Can you paste in your code that is through the bug?

[dccarmo]

Sure.

Here is the FormFields interface:

interface FormFields {
  business: {
    name: string;
  };
}

And then, in my Field component:

<Field
  name="business.name"
  render={({ field, form }: FieldProps<FormFields>) => (
    <div className="field">
      <div className="control">
        <input
          {...field}
          type="text"
          placeholder="Business Name"
          className={
            form.touched.business.name && form.errors.business.name
              ? 'input is-danger'
              : 'input'
          }
        />
      </div>
    </div>
  )}
/>

The TS error ([ts] Property 'name' does not exist on type 'boolean'.) is given on form.touched.business.name.

Looking at the type definition, it seems that form.errors.business.name won't work as well, because it has a anytype.

I tried searching for a way to get keys of nested objets the same way you're currently doing with keyof but didn't find anything, maybe it's not possible right now.

[jaredpalmer]

Correct way to handle this:

<Formik
      initialValues={{ business: { name: '' } }}
      onSubmit={values => console.log(values)}
      render={({
        values,
        handleChange,
        handleBlur,
      }: FormikProps<{ business: { name: string } }>) => (
        <Form>
          <Field
            name="business.name"
            render={({
              field,
              form,
            }: FieldProps<{ business: { name: string } }>) => (
              <div className="field">
                <div className="control">
                  <input
                    {...field}
                    type="text"
                    placeholder="Business Name"
                    className={
                      form.touched.business &&
                      form.touched.business.name &&
                      form.errors.business &&
                      form.errors.business.name
                        ? 'input is-danger'
                        : 'input'
                    }
                  />
                </div>
              </div>
            )}
          />
        </Form>
      )}
    />

[dccarmo]

Nice! Got it working with your PR. Thanks!