Optional object with required fields in react-jsonschema-form - forms

Question

Given a json schema like the one below, the react-jsonschema-form validator essentially requires both shipping_address and billing_address even though the billing_address is not listed as required. This is because the address type requires all three of its properties. How can I make the billing_address optional? It seems that react-jsonschema-form should simply no submit billing_address if not all of its address properties are filled in. Here is a link to the react-jsonschema-form playground.
{
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"city": {
"type": "string"
},
"state": {
"type": "string"
}
},
"required": [
"street_address",
"city",
"state"
]
}
},
"type": "object",
"properties": {
"billing_address": {
"title": "Billing address",
"$ref": "#/definitions/address"
},
"shipping_address": {
"title": "Shipping address",
"$ref": "#/definitions/address"
}
},
"required": [
"shipping_address"
]
}

Answer 1

You can use dynamic schema dependencies to make the billing address conditionally displayed and required. This isn't the same as having an optional object but seem to suffice if you're willing to have a slightly different user experience. Here is a link to the react-jsonschema-form playground. It is best viewed, in my opinion, with live validation disabled (there's a checkbox in the upper-right of the page).
{
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"city": {
"type": "string"
},
"state": {
"type": "string"
}
},
"required": [
"street_address",
"city",
"state"
]
}
},
"type": "object",
"properties": {
"different_addresses": {
"title": "My billing address is different than my shipping address.",
"type": "boolean",
"default": false
},
"shipping_address": {
"title": "Shipping address",
"$ref": "#/definitions/address"
}
},
"required": [
"shipping_address"
],
"dependencies": {
"different_addresses": {
"oneOf": [
{
"properties": {
"different_addresses": {
"enum": [
false
]
}
}
},
{
"properties": {
"different_addresses": {
"enum": [
true
]
},
"billing_address": {
"title": "Billing address",
"$ref": "#/definitions/address"
}
},
"required": [
"billing_address"
]
}
]
}
}
}

Answer 2

my question is related to your JSON schema.
I need to target the "grandchild" of a parent object for a dependency.
Is this possible? In case of "different_addresses" being an object.
For example:
"dependencies": {
"different_addresses": {
"properties": {
"OTHER_FIELD": {
"oneOf": [
{
"properties": {
"different_addresses": {
"properties": {
"OTHER_FIELD": {
"enum": [
false
]
}
}
}
}
}
]
}
}
}
}