How do you clear array value when another select widget change value?

[dreamofi]

Hi everyone,
Currently I have a form like this:

{
  "type": "object",
  "properties":
  {
    "getType":
    {
      "type": "string",
      "ui":
      {
        "widget": "select",
        "widgetConfig":
        {
          "enumSource": function (formData, constData, selfData, tempData, itemIdxChain)
          {
            console.log(constData.types) const typeOptions = constData.types.map(type => (
            {
              "value": type.name,
              "label": type.name
            })) if (!typeOptions)
            {
              return [
              {
                "value": "",
                "label": "None"
              }]
            } console.log("type", typeOptions) return typeOptions
          }
        }
      }
    },
    "subtype":
    {
      "type": "array",
      "ui":
      {
        "widget": "checkbox",
        "widgetConfig":
        {
          "enumSource": function (formData, constData, selfData, tempData, itemIdxChain)
          {
            if (formData.getType)
            {
              const subtype = constData.types.reduce((acc, curValue) =>
              {
                if (curValue.name === formData.getType)
                {
                  acc = curValue.subtype.map(table => (
                  {
                    "value": table,
                    "label": table
                  }))
                }
                return acc
              }, []) return subtype
            }
            return []
          }
        }
      }
    }
  },
  "globalConfig":
  {
    "constants":
    {
      "types": [
      {
        "name": "type1",
        "subtype": ["sub11", "sub12", "sub13"],
      },
      {
        "name": "type2",
        "subtype": ["sub21", "sub22", "sub23"],
      }]
    }
  }
}

The issue: I use this schema in the Playground, In the Select Type dropdown, if I select type1, and then tick in one or more subtypes checkbox, the initial result when I click on the Get Data button is like this

{ "getType": "type1", "subtype": [ "sub11", "sub12" ] } 

If I change the type(say type2), check in one subtype checkbox and click on the Get Data button, the previous value of the subtype array is not reset:

{ "getType": "type1", "subtype": [ "sub21", "sub22", "sub11", "sub12" ] } 

So, how can I clear the previous value in the subtype array, so that it will be like this instead ?

    {
        "getType": "type1",
        "subtype": ["sub21", "sub22", ]
    }

Thank you

[daniel-dx]

Refer to https://ncform.github.io/ncform/ncform-show/playground/index.html#tpl=adv-temp-value

[dreamofi]

Hi @daniel-dx,

I have been able to implement the conditional display (and clearing the previous selected values) by utilizing the "valueTemplate" field of the dependent submenu like this:

{
   "type":"object",
   "properties":{
      "getType":{
         "type":"string",
         "ui":{
            "widget":"select",
            "widgetConfig":{
               "itemDataKey":"selectedType",
               "enumSource":"dx: ({{$const.types}} || []).map(type => ({value: type.name, label: type.name, subtype: type.subtype}))"
            }
         }
      },
      "subtype":{
         "type":"array",
         "valueTemplate":"dx: ({{$temp.selectedType}} && {{$root.subtype}}) ? ({{$root.subtype}}).filter(item => ({{$temp.selectedType.subtype}}).includes(item)) : []",
         "ui":{
            "widget":"select",
            "widgetConfig":{
               "itemDatakey":"selectedSubtype",
               "multiple":true,
               "enumSource":"dx: ({{$temp.selectedType.subtype}} || []).map(item => ({value: item, label: item}))"
            },
            "hidden":"dx: !{{$temp.selectedType}}"
         }
      }
   },
   "globalConfig":{
      "constants":{
         "types":[
            {
               "name":"type1",
               "subtype":[
                  "sub11",
                  "sub12",
                  "sub13"
               ]
            },
            {
               "name":"type2",
               "subtype":[
                  "sub21",
                  "sub22",
                  "sub23"
               ]
            }
         ]
      }
   }
}

[dreamofi]

For anyone wondering, this is how I add another element that depend on the dependent submenu in the previous form:

The down side is that when validation is added, the form can get quite slow. Is anyone know of a way to only activate validation when the submit button is clicked on?

{
   "type":"object",
   "properties":{
      "getType":{
         "type":"string",
         "ui":{
            "widget":"select",
            "widgetConfig":{
               "itemDataKey":"selectedType",
               "enumSource":"dx: ({{$const.types}} || []).map(type => ({value: type.name, label: type.name, subtype: type.subtype}))"
            }
         }
      },
      "subtype":{
         "type":"array",
         "valueTemplate":"dx: ({{$temp.selectedType}} && {{$root.subtype}}) ? ({{$root.subtype}}).filter(item => ({{$temp.selectedType.subtype}}).includes(item)) : []",
         "ui":{
            "widget":"select",
            "widgetConfig":{
               "itemDatakey":"selectedSubtype",
               "multiple":true,
               "enumSource":"dx: ({{$temp.selectedType.subtype}} || []).map(item => ({value: item, label: item}))"
            },
            "hidden":"dx: !{{$temp.selectedType}}"
         }
      },
      "groupMenu":{
         "type":"object",
         "ui":{
            "hidden":"dx: !{{$root.subtype.length}}",
            "disableCollapse":true,
            "showLegend":false
         },
         "properties":{
            "anotherDependenceMenu":{
               "type":"array",
               "ui":{
                  "noLabelSpace":true,
                  "showLegend":false,
                  "widgetConfig":{
                     "disableAdd":true,
                     "disableDel":true,
                     "disableItemCollapse":true,
                     "disableCollapse":true,
                     "disableReorder":true,
                     "autoIdxToLabel":false
                  }
               },
               "valueTemplate":"dx: ({{$root.subtype}} || []).map(item => ({group: {subtypeName: item}}))",
               "items":{
                  "type":"object",
                  "ui":{
                     "showLegend":false,
                     "label":"dx: {{$root.subtype[i]}}"
                  },
                  "properties":{
                     "group":{
                        "type":"object",
                        "ui":{
                           "showLabel":false,
                           "noLabelSpace":true,
                           "legend":"dx: {{$root.subtype[i]}}"
                        },
                        "properties":{
                           "subtypeName":{
                              "type":"string"
                           },
                           "comment":{
                              "type":"string"
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   },
   "globalConfig":{
      "constants":{
         "types":[
            {
               "name":"type1",
               "subtype":[
                  "sub11",
                  "sub12",
                  "sub13"
               ]
            },
            {
               "name":"type2",
               "subtype":[
                  "sub21",
                  "sub22",
                  "sub23"
               ]
            }
         ]
      }
   }
}