Angular的轻量级JSON Schema Form Builder

Angular的轻量级JSON Schema Form Builder
插件名称 json-schema-form
发布时间 2020年6月2日
插件作者 dashjoin

基于JSON模式的轻量级,灵活,紧凑,动态表单构建器。

更多功能:

  • 基于REST服务的自动完成
  • 自定义布局:标签页,表格,垂直,水平等
  • 用材质样式。

安装和导入:

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
  ]
}

基本用法:

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);
  }
}