How can I create a section of fields with angular2 json schema form?

Question

I'm using https://github.com/dschnelldavis/angular2-json-schema-form and my form HTML is:

<json-schema-form
[schema]="schema"
(onSubmit)="exampleOnSubmitFn($event)">
</json-schema-form>

My schema is:

this.schema = {
  type: "object",
  properties: {
    CCN: {
      required: true,
      type: "number",
      minimum: 1000000000,
      maximum: 99999999999999999999
    },
    Quarter: {
      type: 'string',
      required: true,
      enum: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    Year: {
      type: 'string',
      required: true,
      enum: ['2018', '2019', '2020']  
    },
    covered_medi: {
      title: "Covered by Medicare/Medicaid",
      type: "number",
      required: true
    },
    covered_private: {
      title: "Covered by private insurance",
      type: "number",
      required: true
    },
    Uninsured: {
      type: "number",
      required: true
    },
  }
}

I want Quarter and Year to be in a separate section. I tried using the layout property:

this.layout = [{
  type: "fieldset",
  title: "Reporting Period",
  items: [{
    key: "Quarter"
  }, {
    key: "Year"
  }]
}]

But that seems to not work.

Answer 1

If you have installed and instantiated the provider. The only thing that can fail is the schema, examples, or the callback, test with an empty one.

ts

@Component({...})
export class MyComponent {

   public schema: any = {...}
   public onSubmit(event) {...}
   ... }

html

<json-schema-form
  [schema]="schema"
  (onSubmit)="onSubmit($event)">
</json-schema-form>

In this example, put the required out of each property.