Angular Material ArrayLayoutRenderer: Cannot read property 'scope' of undefined

[JBBianchi]

Describe the bug

An array of objects cannot be rendered even though it's marked as supported in the renderer set.

Expected behavior

The array of objects to be rendered, to be able to add and remove items.

Steps to reproduce the issue

1. Clone the Angular Seed
2. Modify the schema.json asset to the following:

{
  "type": "object",
  "properties": {
    "some-object": {
      "type": "array",
      "items": {
        "title": "Array of strings",
        "type": "object",
        "properties": {
          "some-prop": {
            "type": "string"
          },
          "some-strings": {
            "type": "array",
            "items": {
              "type": "string"
            }
          }
        }
      }
    }
  }
}

3. Modify the ui-schema.json asset to the following:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/some-object",
      "options": {
        "type": "VerticalLayout",
        "elements": [
          {
            "type": "Control",
            "scope": "#/properties/some-prop"
          }
        ]
      }
    }
  ]
}

4. Run npm start and visit http://localhost:4200/
5. Look at the console:

ERROR TypeError: Cannot read property 'scope' of undefined
    at ArrayLayoutRenderer.push.pdlW.ArrayLayoutRenderer.getProps (array-layout.renderer.js:127)
    at ArrayLayoutRenderer_div_11_Template (array-layout.renderer.js:90)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshEmbeddedViews (core.js:10591)
    at refreshView (core.js:9490)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)

Screenshots

No response

In which browser are you experiencing the issue?

Chrome 91.0.4472.124 x64

Framework

Angular

RendererSet

Material

Additional context

Angular CLI: 11.2.11
Node: 12.22.1
OS: win32 x64

Angular: 11.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1102.11
@angular-devkit/build-angular 0.1102.11
@angular-devkit/core 11.2.11
@angular-devkit/schematics 11.2.11
@angular/cdk 11.2.11
@angular/cli 11.2.11
@angular/flex-layout 11.0.0-beta.33
@angular/material 11.2.11
@schematics/angular 11.2.11
@schematics/update 0.1102.11
rxjs 6.6.3
typescript 4.1.5

@jsonforms/angular 2.5.1
@jsonforms/angular-material 2.5.1
@jsonforms/core 2.5.1

[sdirix]

Hi @JBBianchi, thanks for the bug report. Arrays of objects are definitely supported.

I can reproduce the issue in the seed. It seems something goes wrong when we build the JSON Forms Angular packages as our internal example application in the JSON Forms repository can render your schemas without a problem.

We'll definitely take a look at this.

Unrelated to the problem: When you want to define a ui schema for the array children then it must be placed in the detail property of the options, e.g.:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/some-object",
      "options": {
        "detail": {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/some-prop"
            }
          ]
        }
      }
    }
  ]
}

[JBBianchi]

I think it's because mapToProps is not declared as protected in ArrayLayoutRenderer like its abstract parent part.

[sdirix]

Version 3.0.0-alpha.1 containing the fix for this issue is now released.