How to clear some fields in form - Redux-Form

Question

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.

Answer 1

This worked for me:

resetAdvancedFilters(){         const fields = ['my','fields','do','reset','properly']         for (var i = 0; i < fields.length; i++) {             this.props.dispatch(change('formName',fields[i],null))             this.props.dispatch(untouch('formName',fields[i]))         }     } 

Answer 2

Using the below, it clears the respective multiple fields and also clears the errors if any for those respective fields.

Common function to reset multiple fields.

import {change, untouch} from 'redux-form';  //reset the respective fields's value with the error if any resetFields = (formName, fieldsObj) => {       Object.keys(fieldsObj).forEach(fieldKey => {            //reset the field's value           this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey]));            //reset the field's error           this.props.dispatch(untouch(formName, fieldKey));        }); } 

Use the above common function as,

this.resetFields('userDetails', {     firstName: '',     lastName: '',     dateOfBirth: '' });