Unselect dropdown

General
1

Hey, I want to make my custom dropdown unselectable.
Could you please advise me on how to do it?
If possible, thanks in advance :slight_smile:

I’m using the following versions:
“@jsonforms/angular”: “3.0.0”,
“@jsonforms/angular-material”: “3.0.0”,
“@jsonforms/core”: “3.0.0”

My custom dropdown:

{{ label }} {{ option | jsonFormsDropdownLabel }}

{{ error | jsonFormsUniqueError }}

import { Component } from '@angular/core'; import { AutocompleteControlRenderer } from '@jsonforms/angular-material';

@Component({
selector: ‘app-jsonforms-unselect’,
templateUrl: ‘./jsonforms-unselect.component.html’,
styleUrls: [‘./jsonforms-unselect.component.scss’],
})
export class JsonformsUnselectComponent extends AutocompleteControlRenderer {}

I tried to add the empty option with null value, but got the error “must be equal to one of the allowed values”.

The part of the schema:
“types”: {
“title”: “types”,
“$schema”: “http://json-schema.org/draft-07/schema#”,
“type”: “object”,
“description”: “Schema for selecting types.”,
“oneOf”: [
{
“$schema”: “http://json-schema.org/draft-07/schema#”,
“title”: “type1”,
“type”: “object”,
“properties”: {
“type_id”: {
“title”: “ID”,
“type”: “string”,
“pattern”: “[1]{24}$”
},
“flow”: {
“title”: “Flows”,
“type”: “string”,
“enum”: [
“flow1”
]
}
},
“required”: ,
“additionalProperties”: false
},
{
“$schema”: “http://json-schema.org/draft-07/schema#”,
“title”: “type2”,
“type”: “object”,
“properties”: {
“type_id”: {
“title”: “ID”,
“type”: “string”,
“pattern”: “[2]{24}$”
},
“flow”: {
“title”: “Flows”,
“type”: “string”,
“enum”: [
“flow2”
]
}
},
“required”: ,
“additionalProperties”: false
}
],
“properties”: {
“flow”: {
“enum”: [
“flow1”,
“flow2”
],
“title”: “Flows”
}
},
“required”:
}

  1. a-f\d ↩︎

  2. a-f\d ↩︎

2

Hi @VladislavLinnik,

If you want to actually support null in the data, then the schema also needs to model this possibility, for example by adding null as one of the allowed enum values. As this is not the case in the given schema, you see validation errors.

In case you want to “delete” the value, then I would like to suggest to add an initial “empty” option. When the user selects it, you then call handleChange with the new value undefined. In that case the value will be deleted.

This is what we do in the React Vanilla renderers.

1 Like