koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
538 stars 154 forks source link

Radio field conditional content different for each enum #252

Open giorgosvr46 opened 3 years ago

giorgosvr46 commented 3 years ago

Hello

In radio fields how can i display conditional content based on the selected input different for each answer for more than 2 possible answers? Lets say for example in the following:

{
  type: 'object',
  allOf: [
    {
      properties: {
        first_field: {
          type: 'string',
          enum: [
            'answer 1',
            'answer 2',
            'answer 3'
          ],
          'x-display': 'radio',
          title: 'First field'
        }
      },
      if: {
        required: [
          'first_field'
        ],
        properties: {
          "first_field": {
            "const": 'answer 1'
          }
        }
      },
      then: {
        properties: {
          new_field_1: {
            type: 'string',
            'x-display': 'radio',
            enum: ['option 1', 'option 2'],
            title: 'New Field 1'
          }
        }
      },
      else: {
        properties: {
          new_field_2: {
            type: 'string',
            'x-display': 'radio',
            enum: ['option 1', 'option 2'],
            title: 'New field 2'
          }
        }
      }
    },
  ],
}

As is, it will show new_field_2 for answers 2 and 3. I want for 'answer 2' in first_field to display a new radio field and for 'answer 3' display a different one. As stated here https://json-schema.org/understanding-json-schema/reference/conditionals.html it can be done by wrapping multiple if and then inside an allOf, but trying to move the first_field property outside the allOf did not work. Is there a way to achieve this functionality ?

Thanks

mbilbille commented 3 years ago

Facing the same limitation... Wrapping pairs of if and then inside an allOf does not seem to be supported in the latest 1.25-beta version.

And I did not find any workaround to support conditional content with more than 2 options

Vision70 commented 3 years ago

Maybe it works like you need

{ 'type': 'object', 'oneOf': [ { 'title': 'First field', 'properties': { 'valor': { 'type': 'string', 'const': 'answer 1' }, 'new_field_1': { 'type': 'string', 'x-display': 'radio', enum: ['option 1', 'option 2'], 'title': 'New field 1' } }, }, { 'title': 'answer 2', 'properties': { 'valor': { 'type': 'string', 'const': 'answer 2' } } }, { 'title': 'answer 3', 'properties': { 'valor': { 'type': 'string', 'const': 'answer 3' }, 'new_field_2': { 'type': 'string', 'x-display': 'radio', enum: ['option 1', 'option 2'], 'title': 'New field 2' } }, 'required': [ 'new_field_2' ] } ], 'x-display': 'radio' },