Redux form - how to set fields as touched

Question

I'm working with form that consists of multiple pages and I want to solve validation.

When I hit Submit button all fields on the present page shows error messages beneath, but if I change the page then I need to hit submit again because these fields weren't set as touched.

My problem would be solved if I could for example set all fields on the page as touched, once the form has flag anyTouched: true.

I'm using redux-form: '^6.0.0-rc.4' and I have one container where I include redux-form and multiple components consisting of fields.

Answer 1

In redux-form 7.4.2. This can be achieved by checking to see if the form is valid.

If valid you can can load one of your other pages. If the form is not valid, use reduxForms getFormSyncErrors selector and pass in the keys returned by this object to the reduxForm touch property.

import React, { Component } from 'react'
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, getFormSyncErrors } from 'redux-form';

class MyComponent extends Component {

  ...

  this.props.valid ? 
    // navigate away 
    : this.props.touch(...Object.keys(this.props.formErrors))

  ...

}

function mapStateToProps(state) {
  return {
    formErrors: getFormSyncErrors('myForm')(state)
  }
}

export default compose(
  connect(mapStateToProps, null),
  reduxForm({form: 'myForm'})
)(MyComponent)