How to conditionally hide/show a GroupLayout based on a checkbox value in Angular custom Renderer

General
1

show an entire GroupLayout based on the value of a checkbox field in my form data.

Here’s a simplified example of what I’m trying to achieve:

  • There is a checkbox (e.g., “Show details”).
  • If the checkbox is checked, a GroupLayout with additional fields should be displayed.
  • If the checkbox is unchecked, the GroupLayout should be hidden completely.

My current setup:
In my Angular component, the template for rendering the group looks like this:

html

<div>
  <insure-collapsible-panel
    *insureTranslation="let t"
    [opened]="true"
    [label]="t(uischema?.label || '')"
    [headingSize]="'normal'"
  >
    @for (el of uischema?.elements; track el) {
      <div>
        <jsonforms-outlet
          [schema]="schema"
          [uischema]="el"
          [path]="path"
        ></jsonforms-outlet>
      </div>
    }
  </insure-collapsible-panel>
</div>

component

// group-layout.renderer.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { JsonFormsBaseRenderer, JsonFormsModule } from '@jsonforms/angular';
import { GroupLayout, rankWith, uiTypeIs } from '@jsonforms/core';

@Component({
  selector: 'form-management-group-layout-renderer',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,

  imports: [JsonFormsModule],
  templateUrl: './group-custom-layout.html',
})
export class GroupLayoutRendererComponent extends JsonFormsBaseRenderer<GroupLayout> {
  override uischema!: GroupLayout;
}

export const GroupLayoutTester = rankWith(1, uiTypeIs('Group'));

and here is my uischema

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "label": "checkbox",
      "elements": [
        {
          "type": "Control",
          "label": "TEST",
          "scope": "#/properties/checkbox/properties/booleanValue"
        }
      ]
    },
    {
      "type": "Group",
      "label": "GroupLabel",
      "rule": {
        "effect": "HIDE",
        "condition": {
          "scope": "#/properties/checkbox/properties/booleanValue",
          "schema": {
            "const": true
          }
        }
      },
      "elements": [
        {
          "type": "Control",
          "label": "stringLabel",
          "scope": "#/properties/x/properties/ElementX"
         
        },
        {
          "type": "Control",
          "label": "freeText",
          "scope": "#/properties/x/properties/ElementY"
                   
        }
      ]
    },
   
  ]
}

How should I do to hide show group, if value the checkbox is changed?

2

Hi @vsam ,
hiding a group layout should already be supported by the angular material group renderer. You can have a look here how this is done in its template. I.e. you can use the hidden property defined in the JsonFormsAbstractControl to determine whether your control should show something. It is defined here.

I hope this helps and best regards,
Lucas

1 Like