React-jsonschema-form: "should be equal to one of the allowed values" for async field

Created on 14 Feb 2018 · 5Comments · Source: rjsf-team/react-jsonschema-form

Description

I created an Async Select widget out of react-select, this select widget can download/update options based on user input.

Steps to Reproduce

[Default enum] -> jsonschema -> Display Select with custom widget -> User type words to search -> The Select update the options -> User choose a new option -> "should be equal to one of the allowed values"

Expected behavior

The new options are allowed.

Please let me know:

How can I remove this validate
Or, how can I added the new options downloaded from async function and make them allowed at the widget level (field).

Actual behavior

Error: should be equal to one of the allowed values

Version

"react-jsonschema-form": "^1.0.0",

Source

weasteam

👍1

All 5 comments

I'm having this same issue when trying to create a custom checkboxes widget with an other field (with a text input on it, so you can put any text).

Same question here. Can this validation be removed?

elboletaire on 28 Feb 2018

The validation doesn't come from react-jsonschema-form, but from ajv, which, I guess, makes it harder to disable.

elboletaire on 4 Mar 2018

After many tests, I think I found the solution:

Create function transformErrors to remove errors of should be equal to one of the allowed values

    transformErrors=(errors) =>{
        console.log(errors);
        var e = [];
          errors.map(error => {
            if (error.message !== "should be equal to one of the allowed values"){
                e.push(error)
            }
          });
          console.log(e);
          return e;
    }

Pass the transformErrors to form:

<Form
    schema={this.state.schema}
    onChange={this.handleChange}
    formData={this.state.formData}
    transformErrors={this.transformErrors}
/>

That is it. It will ignore all validation.

weasteam on 4 Apr 2018

👎3

A second option is updating the form schema with the new enum. This solution is field specific.

    handleChange = (data)=>{
        console.log(data)
        data.formData.name = "bb";
        var e = [
            "option #0",
            "option #1",
            "option #2",
        ];
        e.push("bb")
        this.setState({
            schema: {...this.state.schema,
                properties:{...this.state.schema.properties,
                    name:{...this.state.schema.properties.name,
                        enum:e
                    }
                }

            }
        });
        this.setState({formData:{name:"bb"}});
    }

weasteam on 5 Apr 2018

I think if the schema can allow arbitrary values, then enum isn't really right for this field. Modifying the schema is I guess one option, but maybe you should just override that one widget using uiSchema and provide a select widget that has an initial set of values instead of using enum to provide those values.