Select box with loaded null value not passing validation

General
1

Hoping someone could point out any obvious mistakes here.
This is a cut down example but I am loading a default template into the JsonForms component with the appropriate schema/uischema:

template.json

"vehicle_type": null

schema.json

"vehicle_type": {
  "type": ["string", "null"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

uischema.json

{
  "type": "Control",
  "scope": "#/properties/Summary/properties/vehicle_description/properties/vehicle_type"
}

As requested a select is displayed on load with a blank (null) value and clicking it shows the enum options. However validation state:

must be equal to one of the allowed values

I’m loading a complete template with nulls in place as there didn’t appear to be an out of the box function to output the json including all the fields that weren’t entered (I have about 450 fields on this form). I’m not have any problems with multi-selects, integers or strings however selects all exhibit this behaviour.

I have also tried the following any the same issue is exhibited:

schema.json

"vehicle_type": {
  "anyof": [{ "type": "string" }, { "type": "null" }],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

Any help greatly appreciated.

Rob.

2

Hi @robg,

JSON Schema validation is straightforward. For each keyword it checks whether there is an error.

By specifying

the value null is allowed.

However by also specifying

a validation error is thrown as null is not in the list of allowed values.

To fix the issue, you either need to add null to the list of allowed values or use undefined instead as undefined values are not checked by JSON Schema (besides a potential required validation).

3

Many thanks for your prompt response @sdirix

I tried the following:

"vehicle_type": {
  "type": ["string", "null"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5", null]
}

As advised it does pass validation however ideally I don’t want it to show ‘null’ in the select box. I suppose I could change the options to oneOf and generate an option with value : null and title: “” but that would result in the field minimising the question in the bordered select (MUI).
I’m assuming if I switched from loading in a default template via data and using the AJV enabled option on the schema I would encounter the same issue?

I attempted to add undefined in multiple parts of the above but I’m afraid I’m a little lost. All failed to compile. I tried searching the docs but couldn’t see much reference to undefined:

"vehicle_type": {
  "type": ["string", "undefined"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

"vehicle_type": {
  "type": "undefined",
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

"vehicle_type": {
  "type": "undefined",
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5", undefined]
}
4

Hi @robg,

For this you can implement a custom renderer. It can basically just reuse the existing renderer but filter the null option.

The undefined can not be part of the JSON Schema. What I meant is that you can get rid of the type: ['string', 'null'] array and instead just use type: 'string'. Then you don’t initialize your data with null but with undefined or keep it unset. The undefined value will be ignored by AJV and you will not get a validation error.

5

Many thanks again @sdirix for your assistance today. I’ll take a look at both your suggestions.