Author: | dashjoin |
---|---|
Official Page: | Go to website |
Publish Date: | June 1, 2020 |
License: | MIT |
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); } }