0

I have two fields on my redux form, field_A and field_B. Both of these are select fields. After selecting field_A, initialValues of the redux form populates the value for field_A, and loads the options for field_B, for the user to select. Once the user selects field_B, my initialValues of the redux form populates the values of Field_B.

If I now change field_A, new options for field_B are loaded for the user to select. On the UI, the value for field_B clears, but the initialValue still has the value of field_B. The user would be able to submit this form, instead of getting the "Required" validation error. They send a mismatching combination of field_A and field_B to the backend.

When I execute the onChange when selecting field_A, I want to clear the value of field_B back to undefined, so that the user cant submit the form, until they re-select a value for field_B. How can I do this? I tried to use the following link's documentation, but maybe I am misusing the change function. Maybe the change function isn't even the solution.

I tried this.props.change("field_B", undefined) but this didnt change the initialValues.field_B value.

I also tried this.props.initialValues.change("field_B", undefined) but this call errored out.

Vangjel
  • 45
  • 1
  • 6
  • Possible duplicate of [Dynamically load initialValues in Redux Form](https://stackoverflow.com/questions/37116733/dynamically-load-initialvalues-in-redux-form) – Volodymyr Oct 29 '18 at 16:44
  • Not quite the same. By the way, initialValues pops up as a prop for me, but it's part of the redux store, so I cant create an action/reducer to change the state. Im looking for a way to change the state of the form via the onChange of a field. However, I would be modifying a different field. When I modify field_A, I want to clear field_B – Vangjel Oct 29 '18 at 17:55

1 Answers1

0

The solution that I found was t he following:

import { change } from 'redux-form';

export const clearFormName = (reduxFormName, filingFormName, value) => {
    return function (dispatch) {
        dispatch(change(reduxFormName, filingFormName, value));
    };
};

I couldn't call the change function directly on the form, so I created an action and call my action during the onChange when field_A changed.

Vangjel
  • 45
  • 1
  • 6