React-redux-form: change model after reset

Created on 4 Oct 2016  路  8Comments  路  Source: davidkpiano/react-redux-form

I edit my form and submit data.
After submit i call

dispatch(actions.reset('model'))

and after some time i call

dispatch(actions.change('model'))

after change, my form has errors, but model is valid.

need help, pls.

cat

question

Most helpful comment

i reproduced the problem in this repository
https://github.com/Maxim-Chugaev/react-redux-form_problem
screen
1) model changed in

componentDidMount () {
        setTimeout(()=> {
            this.props.dispatch(actions.change('user', MyState));
        }, 1000);
    }

2) click button reset
3) click button load

<button onClick={()=> this.props.dispatch(actions.change('user', MyState))}>
   Load
</button>

All 8 comments

What does your store/form look like? Can I see some example code so I can get a better idea of what the issue is?

i reproduced the problem in this repository
https://github.com/Maxim-Chugaev/react-redux-form_problem
screen
1) model changed in

componentDidMount () {
        setTimeout(()=> {
            this.props.dispatch(actions.change('user', MyState));
        }, 1000);
    }

2) click button reset
3) click button load

<button onClick={()=> this.props.dispatch(actions.change('user', MyState))}>
   Load
</button>

This is fixed, and will go out in the next patch today!

I have the same issue, thanks for fixing it! 馃憤

@davidkpiano Sorry for adding noise to an old thread.

I've a similar issue:

"react-redux-form": "^1.14.0",
componentDidMount() {
  const entry = this.props.user;

  // initialize form
  if (entry) {
    this.props.dispatch(actions.change('userForm', {
      firstName: entry.firstName,
    }));
  }
}

```js
validators={{
required: value && value.length > 0,
}}

Dispatching a change action in cDM doesn't seem to take into account validation. `firstName` will get a value after the change action, but the model remains invalid and has errors.

```js
componentDidMount() {
  const entry = this.props.user;

  // initialize form
  if (entry) {
    setTimeout(() => {
      this.props.dispatch(actions.change('userForm', {
        firstName: entry.firstName,
      }));
    }, 0)
  }
}

The workaround is to wrap actions.change() in a setTimeout which resolves the issue. Is this a known issue?

Thanks!

Not a known issue, it's by design. When you do a change in your <Control> component, _two_ things happen:

  • actions.change
  • actions.setValidity (assuming validateOn="change")

Since you are _manually_ dispatch actions.change, you also need to manually dispatch actions.setValidity (or actions.validate with the validators).

The reason for this is because it's possible for validation to occur on something other than change, such as blur.

@davidkpiano I see what you mean. Thanks for the explanation. I wish there was a way to rerun validations defined in props after action.change. Especially useful when populating edit forms with initial data. For a large model, it'd get super verbose to do actions.validate with all the validators. Also is very error prone to define model validators in two separate locations.

On a different note, moving actions.change to componentWillUpdate seems to work without setTimeout.

Thanks again!

Might be a version 2 feature! (still spec-ing it out)

Was this page helpful?
0 / 5 - 0 ratings