# Conditional Required is not working on Angular 17

**URL:** <https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222>\
**Category:** General\
**Created:** [July 8, 2024, 10:52am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222 "2024-07-08T10:52:50Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 8, 2024, 10:52am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/1 "2024-07-08T10:52:50Z")

</div>

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**

```auto
{
  "type": "object",
  "properties": {
    "fooCarbonToggle": { "type": "boolean" },
    "barCarbonToggle": { "type": "boolean" },
    "bazCarbonToggle": { "type": "boolean" }
  },
  "required": ["bazCarbonToggle"],
  "if": {
    "properties": {
      "fooCarbonToggle": { "const": true }
    }
  },
  "then": {
    "required": ["barCarbonToggle"]
  }
}

```

**UiSchema.json**

```auto
{
  "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:  
 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/a/ad2d441aaa518caf63593c6ae7ff148341068c78.png)

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:

```auto
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:

```auto
"@jsonforms/angular": "^3.3.0",
"@jsonforms/angular-material": "^3.3.0",
"@jsonforms/core": "^3.3.0",

```

i would really appreciate any help

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [July 9, 2024, 7:56am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/2 "2024-07-09T07:56:58Z")

</div>

Hi @kasar,

looking at your JSON Schema, I think it has a bug: When the `if` condition is true, you effectively have two `required` properties in your schema. Can you try rectifying that. E.g. like this:

```json
{
  "type": "object",
  "properties": {
    "fooCarbonToggle": { "type": "boolean" },
    "barCarbonToggle": { "type": "boolean" },
    "bazCarbonToggle": { "type": "boolean" }
  },
  "if": {
    "properties": {
      "fooCarbonToggle": { "const": true }
    }
  },
  "then": {
    "required": ["bazCarbonToggle", "barCarbonToggle"]
  },
  "else": {
    "required": ["bazCarbonToggle"]
  }
}

```

---

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 9, 2024, 11:39am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/3 "2024-07-09T11:39:04Z")

</div>

Hello @lucas-koehler,

i updated the schema.json to the one you proposed but still there is no “update” on the required fields:

 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/1/1c6f0148a8b41e8cbd64a751194e4a8cb3e99169.png)

---

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 10, 2024, 12:52pm UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/4 "2024-07-10T12:52:24Z")

</div>

Also @lucas-koehler , is there any possibility that the validation is not getting updated because of the way i m overriding the `onChange` or `mapAdditionalProps` methods?

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [July 11, 2024, 8:18am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/5 "2024-07-11T08:18:02Z")

</div>

Hi @kasar  
I could imagine your override of `onChange` could cause validation not to be triggered.  
If you have a look at the onChange code in `JsonFormsAbstractControl`, you can see the data there is updated like this:

```ts
onChange(ev: any) {
    this.jsonFormsService.updateCore(
      Actions.update(this.propsPath, () => this.getEventValue(ev))
    );
    this.triggerValidation();
  }

```

Here, an action is used and then the validation triggered. As you do not seem to do anything special in your override of `onChange`, you could try not overriding it and see how it goes with the default implementation.

Overriding `mapAdditionalProps` should not be a problem because it does nothing by default anyway and is meant to be overridden.

---

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 11, 2024, 1:24pm UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/6 "2024-07-11T13:24:23Z")

</div>

I tried removing the `onChange` as well but no luck. The fields are still not required.|

I m sharing a live reproducible devBox in order to check if there is something else wrong.

[https://codesandbox.io/p/devbox/ng-17-jsonforms-r2wsn2](https://codesandbox.io/p/devbox/ng-17-jsonforms-r2wsn2)

Please have a look on it and feel free to edit it, if needed

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [July 16, 2024, 7:47am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/7 "2024-07-16T07:47:59Z")

</div>

Hi @kasar,  
I had another look into our open issues and found out that the if/then/else for required is not supported. See this issue [Render conditional properties defined in `if` · Issue #2262 · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/issues/2262).  
The issue is labeled for react and material but should also apply to angular material because the react material renderers tend to support the most features.

Sorry for noticing earlier!

Best regards,  
Lucas

---

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 16, 2024, 8:43am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/8 "2024-07-16T08:43:15Z")

</div>

Hello @lucas-koehler ,

do you intend to include this feature in the future?

If yes, is there any specific delivery date?

Thanks,  
Kostas

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [July 16, 2024, 8:58am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/9 "2024-07-16T08:58:54Z")

</div>

Hi @kasar ,  
I actually linked the wrong issue. The relevant one is this one: [Required property is not set if field is conditionally required · Issue #1390 · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/issues/1390)

However, that doesn’t change much. Currently, there is no plan to implement this ourselves. Hence, it is in the backlog milestone. We do accept contributions for these issues though.

Best regards,  
Lucas

---

<div class="post-metadata">

**Author:** ![kasar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kasar/32/1058_2.png) [@kasar](https://jsonforms.discourse.group/u/kasar)\
**Post date:** [July 16, 2024, 9:11am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/10 "2024-07-16T09:11:52Z")

</div>

Thanks for the immediate response @lucas-koehler .

Is it possible to provide me the ticket and/or any reference/example/guidance of how it could be implemented so i could check if it would be possible for me to implement it and open a PR to json-forms so i contribute as well?

Best regards,  
Kostas

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [July 22, 2024, 9:02am UTC](https://jsonforms.discourse.group/t/conditional-required-is-not-working-on-angular-17/2222/11 "2024-07-22T09:02:34Z")

</div>

Hi @kasar,

We do not have an approach how the if/then/else would be implemented for all cases unfortunately. Also see this comment: [Required property is not set if field is conditionally required · Issue #1390 · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/issues/1390#issuecomment-1193404634)

I had another look and discovered there is already a open (albeit incomplete) PR for dynamically evaluation the required: [Fix conditionally required property not applying by gatanasov-asteasolutions · Pull Request #2228 · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/pull/2228)  
I noticed that there were some concerns because of the dynamic evaluation. I took that with me to discuss with the team if and how this could be supported in a feasible manner that also does not impact performance too much.

Best regards,  
Lucas