Skip to content

Required object/array are not outlined in red when missing #2530

@fpotier

Description

@fpotier

Describe the bug

When using Angular, nested object/array validation is not reflected on the UI.

Expected behavior

Show the red outline to indicate that the value are not valid.

Steps to reproduce the issue

  1. Clone the test project for angular
  2. Change src/assets/schema.json to
{
  "type": "object",
  "properties": {
    "innerArray": {
      "type": "array",
      "minItems": 1,
      "items": {
        "type": "object",
        "required": [ "name" ],
        "properties": {
          "name": {
            "type": "string"
          }
        }
      }
    },
    "innerObject": {
      "type": "object",
      "required": [ "name" ],
      "properties": {
        "name": {
          "type": "string"
        }
      }
    },
    "primitiveProperty": {
      "type": "string"
    }
  },
  "required": [ "innerObject", "innerArray", "primitiveProperty" ]
}
  1. Change src/assets/uischema.json to
{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "label": "InnerObject",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/innerObject/properties/name"
        }
      ]
    },
    {
      "type": "Control",
      "scope": "#/properties/innerArray"
    },
    {
      "type": "Control",
      "scope": "#/properties/primitiveProperty"
    }
  ]
}
  1. Run the app

Screenshots

Image

It's not obvious for the user that the object/array are required

Which Version of JSON Forms are you using?

v3.7.0

Package

Angular Material Renderers

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions