Lightweight JSON Schema Form Builder For Angular

Description:

A lightweight, flexible, compact, dynamic form builder based on JSON schema.

More Features:

• Autocomplete based on REST services
• Custom layouts: tab, table, vertical, horizontal, etc.
• Styled with Material.

Install & Import:

npm install @angular/material
npm install @angular/flex-layout
npm install @angular/cdk
npm install @dashjoin/json-schema-form

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

import { JsonSchemaFormModule } from '@dashjoin/json-schema-form';
@NgModule({
  imports: [
    JsonSchemaFormModule
  ]
}

Basic Usage:

import { Component } from '@angular/core';
import { Schema } from '@dashjoin/json-schema-form/lib/schema';
@Component({
  selector: 'app-root',
  template: `
    <lib-json-schema-form [(value)]="value" [schema]="schema"></lib-json-schema-form>
    <pre>{{print()}}<pre>
  `
})
export class AppComponent {
  schema: Schema = {
    type: 'array',
    items: {
      type: 'object',
      properties: {
        name: { type: 'string' },
        bday: { type: 'string', widget: 'date' }
      }
    }
  };
  value: any = [{
    name: 'Joe',
    bday: '2018-09-09T22:00:00.000Z'
  }];
  print(): string {
    return JSON.stringify(this.value, null, 2);
  }
}

Preview: