How to clear some fields in form - Redux-Form - reactjs

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: ''
});

Answer 3

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?

Answer 4

there.
Let's look at http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/
For whole form we can use 4 methods:
A) You can use the plugin() API to teach the redux-form reducer to respond to the action dispatched when your submission succeeds.
B) Simply unmount your form component
C) You can call this.props.resetForm() from inside your form after your submission succeeds.
D) You can dispatch reset() from any connected component

Answer 5

Try to use the dispatch function in meta object with following payload:
meta.dispatch({
type: '##redux-form/CHANGE',
payload: null,
meta: { ...meta, field: name },
})
That should do the trick for any field you want.

Answer 6

I found a better way for this,
We can use initialize action creator of RF.
let resetFields = {
firstName: '',
lastName: '',
dateOfBirth: ''
}
this.props.initialize(resetFields, true); //keepDirty = true;
If the keepDirty parameter is true, the values of currently dirty fields will be retained to avoid overwriting user edits.

Answer 7

clear multiple fields
import {change} from 'redux-form';
const fields = {name: '', address: ''};
const formName = 'myform';
const resetForm = (fields, form) => {
Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field])));
}
resetForm(fields,formName);

Answer 8

If we are talking about entering fields into a form, and then navigating away before submitting, this is the best solution. Place this in your componentDidMount() with the fields you want cleared.
this.props.initialize({
firstName: null,
lastName: null,
bankRoutingNum: null,
newBankType: null
});

Answer 9

For a functional component, you can you change function of RF.
Pass change as props to your component and use it like change(Field_name, value)
For example:
import { reduxForm } from "redux-form";
const Screen = ({
handleSubmit,
change
}) => {
onChange = () => {
change(Field_name, value)
}
return (
// Your code
)}

Answer 10

You can use the clearFields prop or action creator to clear multiple fields.
For example, in this simple form, I use the clearFields prop to clear the firstName and lastName fields.
import React from "react";
import { Field, reduxForm } from "redux-form";
const SimpleForm = (props) => {
const { clearFields } = props;
const clearName = (e) => {
e.preventDefault();
clearFields(false, false, ...["firstName", "lastName"]);
};
return (
<form>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<label>Occupation</label>
<Field name="occupation" component="input" type="text" />
</div>
<button onClick={clearName}>Clear Name</button>
</form>
);
};
export default reduxForm({
form: "simple"
})(SimpleForm);