Hello there!
i m trying to reproduce the logic on conditional required fields based on other fields values.
I have implemented a custom angular component that is passed on the renderers.
My Schema is the following:
schema.json
{
"type": "object",
"properties": {
"fooCarbonToggle": { "type": "boolean" },
"barCarbonToggle": { "type": "boolean" },
"bazCarbonToggle": { "type": "boolean" }
},
"required": ["bazCarbonToggle"],
"if": {
"properties": {
"fooCarbonToggle": { "const": true }
}
},
"then": {
"required": ["barCarbonToggle"]
}
}
UiSchema.json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/fooCarbonToggle",
"label": "Foo "
},
{
"type": "Control",
"scope": "#/properties/barCarbonToggle",
"label": "Bar"
},
{
"type": "Control",
"scope": "#/properties/bazCarbonToggle",
"label": "Baz"
}
]
}
The initial state is like that:
and even after i toggle the values to true, the field is still as not required.
The logs on the console tab, comes from my component that extends JsonFormsControl which looks like this:
export class CarbonToggleComponent extends JsonFormsControl {
private initialStep = true;
private propertyName: string = '';
private readonly PROPERTY_NAME = 'propertyName';
constructor(service: JsonFormsAngularService) {
super(service);
}
override ngOnInit() {
super.ngOnInit();
}
override onChange(event: boolean) {
const userData = this.jsonFormsService.getState().jsonforms.core?.data;
const dataToUpdate =
{...userData, [this.propertyName]: event}
this.jsonFormsService.setData(dataToUpdate)
}
override mapAdditionalProps(props: StatePropsOfControl) {
console.log(props.label, 'is required', props.required, )
if (this.initialStep) {
this.propertyName = props.path;
this.initialStep = false;
}
}
}
the versions i use in my 17.3.0 Angular project in the package.json is:
"@jsonforms/angular": "^3.3.0",
"@jsonforms/angular-material": "^3.3.0",
"@jsonforms/core": "^3.3.0",
i would really appreciate any help
