Field name with object path

Is it possible to achieve sth like this currently?

<Formik
  initialValues={{ nested: { value: 'nested value' } }}
  validationSchema={schema}
  onSubmit={(values, { setSubmitting }) => {
    handleSubmit(values);
    setSubmitting(false);
  }}
>
  {() => (
    <Form>
      <Field name="nested.value" />
      <button type="submit">Save</button>
    </Form>
  )}
</Formik>

I know I could use mapPropsToValues and mapValuesToPayload, but I find it really verbose and inconvenient for such a simple and common case. If I had deeply nested object, it would be even worse.

[klis87]

I tried to solve it in my custom component:

import React from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import { get } from 'lodash';

const TextInput = ({ field, form: { touched, errors, values, setFieldValue }, ...props }) => (
  <FormGroup
    validationState={touched[field.name] && errors[field.name] ? 'error' : null}
  >
    <ControlLabel>{props.label}</ControlLabel>
    <FormControl
      type="text"
      {...field}
      {...props}
      value={get(values, field.name)}
      onChange={e => setFieldValue(field.name, e.target.value)}
    />
    {touched[field.name] && errors[field.name] && <HelpBlock>{errors[field.name]}</HelpBlock>}
  </FormGroup>
);

Please notice that I used _.get in value prop so reading is working for nested values. The problem is, that setFieldValue('nested.value', value) would add nested.value key to values object, instead of adjusting values.nested.value. The same problem I would have for setFieldError, setFieldTouched etc.

It seems that this library requires objects to be totally flat, but nested JSONs are really common. And flattening and “deflattening” in every form really kills productivity.

[jswiton]

First of all - thanks for your hard work!

@jaredpalmer Would be great to add also nested touched and errors proposal prototype. Because now I’m using get from lodash for them like below:

touched={get(touched, field.name)}

Where field.name corresponds to the nested object (eg. 'address.city')