angular2-json-schema-form: What's wrong with form?

The keyword is htmlClass.

The schema: part is only about data types: string, number, required etc.

The layout: part is all about presentation, in HTML. What colour the field has, how wide is it, which HTML class has to be used/applied.

So, the answer is, put it in the layout: part.

Just out of curiosity, is this a student assignment ?

Sorry about the error on schemaform.io, there is a small mistake in the payload, take this one:

{
    "schema": {
        "type": "object",
        "properties": {
            "name": {
                "type": "string"
            },
            "Objects": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "object": {
                            "type": "object",
                            "properties": {
                                "objectId": {
                                    "type": "string"
                                },
                                "attributes": {
                                    "type": "array",
                                    "items": {
                                        "type": "object",
                                        "properties": {
                                            "attributeId": {
                                                "type": "string"
                                            },
                                            "value": {
                                                "type": "string"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    "form": [
        {
            "key": "name"
        },
        {
            "key": "secname"
        },
        {
            "key": "Objects",
            "type": "array",
            "items": [
                {
                    "key": "Objects[].object",
                    "items": [
                        {
                            "key": "Objects[].object.objectId",
                            "htmlClass": "col-md-6"
                        },
                        {
                            "key": "Objects[].object.objectName",
                            "htmlClass": "col-md-6"
                        },
                        {
                            "key": "Objects[].object.attributes",
                            "type": "array",
                            "items": [
                                {
                                    "type": "section",
                                    "htmlClass": "row",
                                    "items": [
                                        {
                                            "items": [
                                                {
                                                    "key": "Objects[].object.attributes[].attributeId"
                                                }
                                            ],
                                            "htmlClass": "col-md-6"
                                        },
                                        {
                                            "items": [
                                                {
                                                    "key": "Objects[].object.attributes[].attrbuteName",
                                                    "condition": "",
                                                    "readonly": "true"
                                                }
                                            ],
                                            "htmlClass": "col-md-6"
                                        }
                                    ]
                                },
                                {
                                    "key": "Objects[].object.attributes[].value"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

You need to implement a couple of methods in your schema model, the one that controls the schema form.

Mine is like this:

<json-schema-form [framework]="'bootstrap-3'" [schema]='jsonSchema' [(ngModel)]='organisation' [form]='jsonForm'
                  [options]='jsonFormOptions' (onChanges)='onChanges ($event)' (onSubmit)='onSubmit ($event)'
                  (isValid)='onIsValid ($event)' (validationErrors)='onValidationErrors ($event)'></json-schema-form>

You see the onChanges specified ? It is being called on every change.

You may want to check of the attribute Id is set, fetch the object, and assign the name attribute accordingly.

Good luck!

By the way, do yourself a favour and clean up the schema, start with this:

{
    "schema": {
        "type": "object",
        "properties": {
            "name": {
                "type": "string"
            },
            "Objects": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "object": {
                            "type": "object",
                            "properties": {
                                "objectId": {
                                    "type": "string"
                                },
                                "attributes": {
                                    "type": "array",
                                    "items": {
                                        "type": "object",
                                        "properties": {
                                            "attributeId": {
                                                "type": "string"
                                            },
                                            "value": {
                                                "type": "string"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    "form": [
        {
            "key": "name"
        },
        {
            "key": "secname"
        },
        {
            "key": "Objects",
            "type": "array",
            "items": [
                {
                    "key": "Objects[].object",
                    "items": [
                        {
                            "key": "Objects[].object.objectId",
                            "htmlClass": "col-md-6"
                        },
                        {
                            "key": "Objects[].object.objectName",
                            "htmlClass": "col-md-6"
                        },
                        {
                            "key": "Objects[].object.attributes",
                            "type": "array",
                            "items": [
                                {
                                    "type": "section",
                                    "htmlClass": "row",
                                    "items": [
                                        {
                                            "items": [
                                                {
                                                    "key": "Objects[].object.attributes[].attributeId"
                                                }
                                            ],
                                            "htmlClass": "col-md-6"
                                        },
                                        {
                                            "items": [
                                                {
                                                    "key": "Objects[].object.attributes[].attrbuteName",
                                                    "condition": "",
                                                    "readonly": "true"
                                                }
                                            ],
                                            "htmlClass": "col-md-6"
                                        }
                                    ]
                                },
                                {
                                    "key": "Objects[].object.attributes[].value"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

That’s something you should probably handle outside of the schema form. Were I asked to do that task I would write a function to check if the data is valid. Then, I would create a function to fire an ajax request if the given data passes the data validity check function. Finally I would connect the JSON schema onchanges function to the ajax function.

I made this similar setup b/c I found your schema a bit confusing and preferred doing from scratch to ensure I understood the schema completely:

Looking back, I think the reason yours wasn’t working was that you weren’t referencing the parent objects array in the attributes items array.

{
  "schema": {
    "type": "object",
    "properties": {
      "name": { "type": "string" },
      "object_array": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "id": { "type": "number" },
            "attributes": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "attributeId": {"type": "number"},
                        "attributeName": {"type": "string"}
                    }
                }
            }
          },
          "required": [ "id" ]
        }
      }
    }
  },
  "form": [
    { "key": "name"},
    { "key": "object_array",
      "type": "array",
      "listItems": 3,
      "items": [ {
        "items": [
          {
              "key": "object_array[].id",
              "notitle": true,
              "placeholder": "Object ID"
          },
          {
              "key": "object_array[].attributes",
              "type": "array",
              "items": [
                  {
                      "key":"object_array[].attributes[].attributeId"
                  },
                  {
                      "key":"object_array[].attributes[].attributeName"
                  }
                ]
          }
        ]
      } ]
    }
  ],
  "data": {
      "object_array": [
        {
          "id": 1,
          "attributes": [
            {
              "attributeId": 1,
              "attributeName": "Amazing"
            },
            {
              "attributeId": 2,
              "attributeName": "Wow"
            }
          ]
        },
        {
          "id": 2,
          "attributes": [
            {
              "attributeId": 1,
              "attributeName": "Different"
            }
          ]
        }
      ]
    }
}