Removing the validation when Redux-Form Field is disabled

Question

I am using Redux form v6.5.0 and having a requirement of Removing the validation for any Field when the disabled props is passed as true.

I wrote a custom logic to disable the validation inside render() of custom field component, but looks like updateSyncErrors() is not getting called on the form even after updating the values manually. Because of this, syncErrors object is persisting the field validation error.

    if (field.disabled) {
        field.meta.invalid = false;
        field.meta.error = undefined;
        field.meta.valid = true;
    }

Can we have some straight forward - simple & better approach which tackles this requirement and fixes this issue?

Graff

Answer 1

I faced the same situation, I wanted to disable or enable fields based on API response and according to that, I had to enable and disable validations also. I was able to do that in the below way

Input Field (select field)

              <Field
                formItemLayout={layout}
                name="configType"
                validate={
                  !(
                    response &&
                    response.data &&
                    response.data.isEnabled
                  )
                    ? [required]
                    : undefined
                }
                component={ASelectField}
                placeholder="configType"
                disabled={
                    response &&
                    response.data &&
                    response.data.isEnabled
                }
                onChange={(e) => changeconfigSelectFields(e)}
                onBlur={(e) => {
                  e.preventDefault();
                }}
              >
                {Object.keys(fields.data).map(
                    (obj) => {
                      return <Option key={obj}>{obj}</Option>;
                    }
                  )}
              </Field>

top of the class I Add below method

const required = value => value ? undefined : 'Required'

Zagreus

Answer 2

You can disable the validation of a specific field by passing disableValidation array with field names in your form configuration object. Then you can check if this array contains the field name and if it doesn't provide the field with validation functions.

I suppose an example would demonstrate this best: https://www.webpackbin.com/bins/-Kf7WYdGZtEypx080L99

Mure