Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing the validation when Redux-Form Field is disabled

Tags:

redux-form

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?

like image 617
Ravi Roshan Avatar asked Mar 01 '17 09:03

Ravi Roshan


People also ask

How do I remove a validation field?

Click the control whose data validation you want to remove. On the Format menu, click Data Validation. In the Data Validation dialog box, click the condition that you want to remove, and then click Remove.

How does Redux handle form?

Redux Form is very easy to use and implement, we just have to wrap our form component with the HOC provided by Redux Form and we are good to go. Applying validation to the form is very easy in Redux Form, we can apply validation to all the fields as well as validations for individual fields.


1 Answers

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'
like image 139
Dulanga Heshan Avatar answered Sep 20 '22 20:09

Dulanga Heshan