redux-form: Validation errors not passed to fields after re-initialize when enableReinitialize is turned on

Inside componentWillMount, reset the form component and set destroyOnUnmount to false. Also Initialize the fields as empty string or whatever you need.

componentWillMount() {
    this.props.reset();
  }

reduxForm({
  form: 'login',
  destroyOnUnmount: false,
})(LoginForm);

  connect(
    state => ({
      initialValues: {
        email :_.get(state,'form.values.email', ''),
        password: _.get(state,'form.values.password', ''),
      },
    }),
  )

The problem in my case was that when the component unmounted, the formState got destroyed and on reinitialization, the action redux-form/UPDATE_SYNC_ERRORS wasn’t getting dispatched. Now it’s solved.

I guess, things I’m experiencing are related to this issue. An events chronicle:

1. A form starts mounting.
2. The form is validated for the first time -> redux-form/UPDATE_SYNC_ERRORS is called with an error before componentWillMount.
3. The form is initialized with valid values on componentWillMount.
4. The form is validated for the second time -> redux-form/UPDATE_SYNC_ERRORS is NOT called.
5. The form renders, registers it’s fields and so on.

@lechneal I had a similar issue that I resolved with this code.

componentWillMount() {
...
  this.props.reset();
  this.props.initialize({
        title,
        description,
        url,
        media,
     });
})

export default reduxForm({
...
  keepDirtyOnReinitialize: true
});

Same issue when your initial values are invalid, you do some changes to fields not required (that won’t affect syncErrors) and you press reset. Then redux-form/UPDATE_SYNC_ERRORS event is not triggered because !plain.deepEqual(syncErrors, nextSyncErrors) return false (this is because you are comparing syncErrors coming from this.props while there are currently nextProps that have up to date syncErrors array and this one should be used for that comparison).

Definitely validateIfNeeded and updateSyncErrorsIfNeeded need to be fixed because its not working in v6.0.1 too.

If the initial data is initialized using the action creator - initialize(in method componentWillMount), rather than using the props initialValues, then when second call initialize - it does not trigger the redux-form/UPDATE_SYNC_ERRORS action and as such all of the fields don’t get updated with their error state again.

v6.8.0

When debugging this issue I noticed the props.values and nextProps.values that are passed to shouldValidate (https://github.com/erikras/redux-form/blob/master/src/defaultShouldValidate.js) are always the same. Not sure why this happens since validateIfNeeded is called on componentWillReceiveProps.

Since both values are always the same, shouldValidate only returns true when it’s an initialRender.

For now I’m adding keepDirtyOnReinitialize: true but it’s not really the ideal behavior for me

My way to resolve this problem is to call reset() manually when initialValues got changes. But you should not disable enableReinitialize, because, without it, component won’t receive initialValues prop as expected.

componentWillReceiveProps({ initialValues }) {
    if (this.props.initialValues && ( initialValues !== this.props.initialValues )) {
      this.props.reset();
    }
}

The important condition is to check whether this.props.initialValues is not null, if you are using async initialization.

Do you have a workaround for this issue?

Same here, any progress on this issue?