Combinators example not working with Angular Material

#1

I’m trying to get combinators working in my application.
To make a simple test, I used the JSONs (schema, UI schema, data) from the first example at Combinators Example - JSON Forms and created the form within my Angular 13 application.
The result is: I’m getting “No applicable renderer found!”

Is this a bug or am I missing something? I can open an issue if you prefer.

BTW: I’m using 3.0.0-beta.1 and other forms are working as they should (if they don’t contain combinators)

#2

In case it helps, this is the code:

import { Component } from '@angular/core';
import { angularMaterialRenderers } from '@jsonforms/angular-material';

@Component({
  selector: 'app-test',
  template: `<jsonforms
    [data]="data"
    [schema]="schema"
    [uischema]="uischema"
    [renderers]="renderers"
  ></jsonforms>`,
})
export class TestComponent {
  renderers = angularMaterialRenderers;
  schema = {
    definitions: {
      address: {
        type: 'object',
        title: 'Address',
        properties: {
          street_address: {
            type: 'string',
          },
          city: {
            type: 'string',
          },
          state: {
            type: 'string',
          },
        },
        required: ['street_address', 'city', 'state'],
      },
      user: {
        type: 'object',
        title: 'User',
        properties: {
          name: {
            type: 'string',
          },
          mail: {
            type: 'string',
          },
        },
        required: ['name', 'mail'],
      },
    },
    type: 'object',
    properties: {
      addressOrUser: {
        oneOf: [
          {
            $ref: '#/definitions/address',
          },
          {
            $ref: '#/definitions/user',
          },
        ],
      },
    },
  };
  uischema = {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        label: 'Basic Information',
        scope: '#/properties/addressOrUser',
      },
    ],
  };
  data = {
    addressOrUser: {},
  };
}
#3

Hi @UncleSamSwiss,

the combinator renderers are only provided for the React Material renderer set, see here. They are also offered in the JSON Forms Vue 2 Vuetify renderer set but it’s not part of the docs yet.

For Angular Material you’ll need to write an own renderer for this. You can reuse the JSON Forms core functionality for the combinator use cases to get you started more quickly.