Search code examples
reactjsreact-final-form

Clear meta.touched in declerative form rules


I'm using declarative field rules in react-final-form, which listen to the change of one field and update the value of another field. The code looks like this:

const WhenFieldChanges = ({ field, becomes, set, to }) => (
  <Field name={set} subscription={{}}>
    {(
      { input: { onChange } }
    ) => (
      <OnChange name={field}>
        {value => {
          if (value === becomes) {
            onChange(to)
          }
        }}
      </OnChange>
    )}
  </Field>
)

Then it can be used in the form as follows:

<WhenFieldChanges
  field="gift"
  becomes={false}
  set="giftMessage"
  to={undefined}
/>

It clears the value of the set field. But I also need to clear meta.touched of that field. How can I do that?

Here is a link to the codesandbox.


Solution

  • There's a resetFieldState() function on FormApi that might do what you want.

    Edit 🏁 React Final Form - Declarative Form Rules