How to get all values after submit - not touched fields included

Question

I need to get all values in onSubmit method, not only dirty fields.

import React from 'react'
import { Form, Field } from 'react-final-form'

const App: React.FC = () => (
  <Form onSubmit={values => console.log(values)}>
    {({ form: { submit } }) => (
      <>
        <Field name="street" component="input" placeholder="street" />
        <Field name="city" component="input" placeholder="city" />
        <Field name="state" component="input" placeholder="state" />
        <button onClick={submit}>Submit</button>
      </>
    )}
  </Form>
)

export default App

Actual result: {street: "A", city: "B"}

Expected result: {street: "A", city: "B", state: null}

Answer 1

🏁 Final Form treats '' and undefined as more or less equivalent.

You'll need to provide an initialValues={{ street: null, city: null, state: null }} to get your expected result. However, if the user touches field, changes the value, and then changes it back to empty, the street key will be deleted from the form values (see above link). You could get around that by providing a parse={v => v} to cancel the normal ''-to-undefined conversion.

Hope that helps?