I'm working on a page which has many input validations and logical bindings on it and every sprint iteration the page size increasing. So that, I have to find a beautiful and scalable solution.
Imagine, when user select a value from dropdown as 'A', some fields must be disabled, some fields must be cleared and some fields initilized with default values. I can change one related field (doesn't have validation rule like regexp or lenght constrait) value with some little code like
this.props.dispatch(change('xForm','xField','xValue' ))
My problem is that when I need to clear multiple fields,
It always blocked by my validation method and clear operation is failed ( Note : I supposed to be like that but not like that)
.
I tried some strategies as below but y,z,w fields have some text and it triggered validation rule and hanled errors. So that, inputs have still old values, not cleared ones.
//Clear
this.props.dispatch(change('xForm','yField','' ))
this.props.dispatch(change('xForm','zField','' ))
this.props.dispatch(change('xForm','wField','' ))
What are the best practises for clear inputs or assign some values to inputs in redux-form for pages which have highly dependent inputs.
I have been researching for 2 days but I couldn't find any optimal solution. (redux normalizer, redux form utils etc.)
Thanks.
Wow, that's some complicated logic. The absolute ideal way would be to use the plugin() API to change values in the reducer when your other field values change. It's a complicated API, because you have total control to mess things up in the reducer, but you have a complicated requirement.
However, dispatching three change() actions like you said you are doing should also work fine. You might want/need to untouch() the fields as well if they have Required validation messages that you don't want to show yet.
It always blocked by my validation method and clear operation is failed.
Can you elaborate on what that means, show a stack trace or console error output?