Show conditional field when checked boxes includes some options?

[gentcys]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a shared playground link demonstrating the issue.

Description

Suppose we defined a field of checkboxes with 4 options(A, B, C, D) and another field will show dependent on its checked options included A option.
e.g. we checked (A, B)/(A, C)/(A, B, C)/(A, B, C, D) the other field should be shown in all these cases
And no matter the order we checked these options, like for (A, B), we can checked B then A or checked A then B

Version

1.8.1

[epicfaace]

You can probably do this with a combination of `contains` and `oneOf` -- see https://json-schema.org/understanding-json-schema/reference/array.html#contains for more details on contains.

…

-- Ashwin Ramaswami

On Thu, Dec 2, 2021 at 9:20 PM Cong Chen ***@***.***> wrote: Prerequisites - I have read the documentation <https://react-jsonschema-form.readthedocs.io/>; - In the case of a bug report, I understand that providing a SSCCE <http://sscce.org/> example is tremendously useful to the maintainers. - Ideally, I'm providing a shared playground link <https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJmaXJzdE5hbWUiOlsiQSJdLCJsYXN0TmFtZSI6Ik5vcnJpcyIsImFnZSI6NzUsImJpbyI6IlJvdW5kaG91c2Uga2lja2luZyBhc3NlcyBzaW5jZSAxOTQwIiwicGFzc3dvcmQiOiJub25lZWQifSwic2NoZW1hIjp7InRpdGxlIjoiQSByZWdpc3RyYXRpb24gZm9ybSIsImRlc2NyaXB0aW9uIjoiQSBzaW1wbGUgZm9ybSBleGFtcGxlLiIsInR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7ImZpcnN0TmFtZSI6eyJ0eXBlIjoiYXJyYXkiLCJ0aXRsZSI6IkZpcnN0IG5hbWUiLCJpdGVtcyI6eyJ0eXBlIjoic3RyaW5nIiwiZW51bSI6WyJBIiwiQiIsIkMiLCJEIl19fX0sImRlcGVuZGVuY2llcyI6eyJmaXJzdE5hbWUiOnsib25lT2YiOlt7InByb3BlcnRpZXMiOnsiZmlyc3ROYW1lIjp7ImVudW0iOltbIkEiLCJCIl1dfSwiZGVzY3JpcHRpb24iOnsidHlwZSI6InN0cmluZyJ9fX1dfX19LCJ1aVNjaGVtYSI6eyJmaXJ0TmFtZSI6eyJ1aTp3aWRnZXQiOiJjaGVja2JveGVzIn19LCJ0aGVtZSI6ImRlZmF1bHQiLCJsaXZlU2V0dGluZ3MiOnsidmFsaWRhdGUiOmZhbHNlLCJkaXNhYmxlIjpmYWxzZSwicmVhZG9ubHkiOmZhbHNlLCJvbWl0RXh0cmFEYXRhIjpmYWxzZSwibGl2ZU9taXQiOmZhbHNlfX0=> demonstrating the issue. Description Suppose we defined a field of checkboxes with 4 options(A, B, C, D) and another field will show dependent on its checked options included A option. e.g. we checked (A, B)/(A, C)/(A, B, C)/(A, B, C, D) the other field should be shown in all these cases *And no matter the order we checked these options, like for (A, B), we can checked B then A or checked A then B* [Description of the bug or feature] Steps to Reproduce 1. [First Step] 2. [Second Step] 3. [and so on...] Expected behavior [What you expected to happen] Actual behavior [What actually happened] Version You can usually get this information in your package.json or in the file URL if you're using the unpkg one. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2625>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAM4MX5UYT4HPJKBNP77IATUPASPDANCNFSM5JIT3HZA> .

[gentcys]

@epicfaace Thanks for you reply.

Did you mean

{
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "array",
      "title": "First name",
      "items": {
        "type": "string",
        "enum": [
          "A",
          "B",
          "C",
          "D"
        ]
      }
    }
  },
  "dependencies": {
    "firstName": {
      "oneOf": [
        {
          "properties": {
            "firstName": {
              "contains": "A"
            },
            "description": {
              "type": "string"
            }
          }
        }
      ]
    }
  }
}

[epicfaace]

Perhaps, did that work?

…

-- Ashwin Ramaswami

On Thu, Dec 2, 2021 at 10:19 PM Cong Chen ***@***.***> wrote: @epicfaace <https://github.com/epicfaace> Thanks for you reply. Did you mean { "title": "A registration form", "description": "A simple form example.", "type": "object", "properties": { "firstName": { "type": "array", "title": "First name", "items": { "type": "string", "enum": [ "A", "B", "C", "D" ] } } }, "dependencies": { "firstName": { "oneOf": [ { "properties": { "firstName": { "contains": "A" }, "description": { "type": "string" } } } ] } } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAM4MX5RN4V4HVX3ZYHIJLLUPAZLLANCNFSM5JIT3HZA> .

[dylanfprice]

Similar use case--it worked for me. Just one small adjustment since contains is supposed to be a schema:

"contains": {
  "const": "A"
}

Playground link - if A is checked (along with any others), description field shows.

[Zhenglish]

Hum, the 'contains' in the oneOf stops working when I have multiple controls. In this example, I have 2 checkboxes, and each controls a text field. They work by themselves, but stop working when both selected.

Any suggestions?

playground link

[dylanfprice]

Yeah I just encountered that one too. You have to enumerate the cases which is a bit unsavory but it works. Playground link.

Beyond about 3 controls it becomes a good interview question to generate all the cases 😄

You'll want to follow #2506 which should make it a lot easier.

[Zhenglish]

There is a warning message in console "react_devtools_backend.js:4045 ignoring oneOf in dependencies because there isn't exactly one subschema that is valid". This occurs when no item is select, so I added a subschema for that scenario. However, I couldn't make it right. Can you please look at my playground?

[dylanfprice]

contains matches items within an array so contains: {const: []} doesn't do what you want. You need something that will match an empty array, maxItems: 0 works. playground

[dylanfprice]

@epicfaace I think you can close this

[epicfaace]

thanks!

[jorisw]

const Form = JSONSchemaForm.default;

const schema = {
  "title": "Title",
  "type": "object",
  "properties": {
    "intent_goal": {
      "title": "What is your goal?",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [
          "advise_me",
          "start_company",
          "other"
        ],
        "enumNames": [
          "Advise me",
          "I want to start a company",
          "Other goal..."
        ]
      },
      "minItems": 1,
      "uniqueItems": true
    }
  },
  "required": [
  ],
  "dependencies": {
    "intent_goal": {
      "oneOf": [
        {
          "properties": {
            "intent_goal": {
              "items":{
                "enum": [null]
              }
            }
          }
        },{
          "properties": {
            "intent_goal": {
              "contains": { enum :  ["other"] }  
            },
            "other_goal": {
              "type": "string"
            }
          }
        }
      ]
    }
  }
};

const uiSchema = {
  "intent_goal": {
    "ui:widget": "checkboxes"
  },
  "other_goal": {
    "ui:widget": "textarea"
  }
}

ReactDOM.render((
  <Form schema={schema} uiSchema={uiSchema} />
), document.getElementById("app"));

[xyy7260]

是的，我也刚遇到那个。你必须举一些命令人反对但有有效的例子。游乐场链接。

除了大约3个控制之外，它成为生成所有案例的一个很好的面试题😄

你会想要跟随#2506这应该会让它更容易。

The more options you have, the more code you write. Is there a better way to do this?