根据条件隐藏 FormIo Radio 选项？答案

【问题标题】：Hide a FormIo Radio option based on condition?根据条件隐藏 FormIo Radio 选项？
【发布时间】：2020-08-19 22:23:10
【问题描述】：

是否可以根据上一个问题的答案隐藏单选选项值？

例如：

问题 1（单选）：红色还是蓝色？

问题 2（单选）：10（仅红色）、20（仅红色）、（30 仅蓝色）、40（仅蓝色）

如果用户选择蓝色，我不想显示 10 和 20。

我无法将第二个问题一分为二，因为 API 属性必须相同。

【问题讨论】：

你能添加一些示例代码吗

标签： javascript radio formio

【解决方案1】：

由于 formiojs@4（可通过https://next.form.io 获得）组件可以选择定义特定的逻辑。因此，您可以根据不同的条件（例如事件或自定义 javascript）更改组件本身。

基本上，只要颜色组件有值，您就会想要触发逻辑（因此它不会在每次更改时触发不必要的）。在此更改中，您可以根据颜色值更新组件值。此外，如果新选项不包括其当前值，则清除组件的值。

例如，您可以执行以下操作：

var values = [];

if (data.color === 'red') {
  values.push(10, 20);
} else if (data.color === 'blue') {
  values.push(30, 40);
}

if (!values.includes(data.option)) {
  delete data.option;
}

schema = {
  values: values.map((value) => ({ label: value.toString(), value })),
};

查看以下 jsfiddle 以获取工作示例：https://jsfiddle.net/airarrazaval/btpyfjm8/

【讨论】：