Angular 5+的JSON模式表单生成器

Angular 5+的JSON模式表单生成器
插件名称 ngx-tru-forms
发布时间 2020年5月26日
插件作者 trufla-technology

一个用于从JSON模式生成表单的Angular 5+模块。

安装:

# NPM
$ npm install @trufla/ngx-tru-forms --save

用法:

该模块可与Angular Material或Bootstrap 4一起使用。导入JsonFormBootstrap4ModuleJsonFormMaterialModule并与结合使用JsonFormModule。例如:

import { JsonFormModule, JsonFormMaterialModule } from '@trufla/ngx-tru-forms';

@NgModule({
  imports: [
    JsonFormModule.forRoot(JsonFormMaterialModule)
  ]
})

在组件中添加以下内容:

<jf-form></jf-form>

选项

Key 描述 需要
[id] 如果页面上有多个,则唯一标识表单
[schema] JSON模式对象 Yes
[data] JSON模式默认值
[style] 额外的类和样式覆盖
[submit] 提交按钮的文字标签
[cancel] 取消按钮的文字标签
[outerClass] 表单组件的包装器类
[submitClass] 提交按钮类
[cancelClass] 取消按钮类
[isWorking] 如果使用异步数据处理,则切换表单状态
[isMultiStep] 将模式视为多步骤。参见示例。
[viewOnly] 仅呈现标签和表单数据。对于报告很有用。
[disabled] 禁用表单中的所有字段。设置为true为禁用,否则为null
(handleSubmit) 注意表单提交。返回JSON模式响应数据
(handleChange) 注意表格变更
(handleCancel) 注意取消点击

const schema = {
	"type": "object",
	"properties": {
		"first_name": {
			"type": "string"
		},
		"last_name": {
    	"type": "string"
    }
	},
	"required": ["make"]
};

const data = {
  "first_name": "Test",
  "last_name": "Me"
}

const onFormSubmit = (form) => console.log(form);
<jf-form
[schema]="schema" 
[data]="data"
(handleChange)="onFormSubmit($event)"
></jf-form>