@yelon/form 是一个基于 JSON Schema 标准的动态构建表单。
特性
符合 JSON Schema 标准
基于 ng-zorro-antd 基础组件库
秉承 Ant Design 价值观
二十几种小部件
可自定义小部件满足业务需求
无任何第三方依赖,可适用所有 antd 项目
如何阅读
在开始之前需要知道文档的一些简单编写规则:
如何使用
安装 @yelon/form
依赖包:
npm i -S @yelon/form
导入 YelonFormModule
模块:
import { YelonFormModule } from '@yelon/form';
@NgModule({
imports: [
YelonFormModule.forRoot()
]
})
export class AppModule { }
虽然默认 @yelon/form
校验是 ajv,但这并不是唯一的选择,你可以覆盖 SchemaValidatorFactory
使用其他校验类库。
全局配置
请参考全局配置,成员如下:
成员 | 说明 | 类型 | 默认值 |
---|
[ajv] | ajv 参数 | Ajv.Options | - |
[ignoreKeywords] | 是否忽略某些数据类型校验(所有类型) | string[] | [ 'type', 'enum' ] |
[liveValidate] | 是否实时校验 | boolean | true |
[autocomplete] | 指定表单 autocomplete 值 | on,off | null |
[firstVisual] | 是否立即呈现错误视觉 | boolean | false |
[onlyVisual] | 是否只展示错误视觉不显示错误文本,并取消错误文本间距 | boolean | false |
[errors] | 自定义通用错误信息 | { [ key: string ]: string } | ERRORSDEFAULT |
[ui] | 默认全局布局 | SFUISchemaItem | - |
[size] | 元素组件大小,用于 nzSize 值 | default,large,small | - |
[button] | 按钮风格 | SFButton | {submit:'提交',submit_type:'primary',reset:'重置',reset_type:'default'} |
[uiDateStringFormat] | date小部件:type="string" 且不指定 schema.format 和 ui.format 时日期格式 | string | yyyy-MM-dd HH:mm:ss |
[uiDateNumberFormat] | date小部件:type="number" 且不指定 schema.format 和 ui.format 时日期格式,默认:T 13位Unix Timestamp | string | T |
[uiTimeStringFormat] | time小部件:type="string" 且不指定 schema.format 和 ui.format 时日期格式 | string | HH:mm:ss |
[uiTimeNumberFormat] | time小部件:type="number" 且不指定 schema.format 和 ui.format 时日期格式,默认:T 13位Unix Timestamp,日期统一使用 1970-01-01 | string | T |
[uiEmailSuffixes] | 指定 format: 'email' 的默认Email后缀 | string[] | ['qq.com', '163.com', 'gmail.com', '126.com', 'aliyun.com'] |
[delay] | 是否延迟渲染,需要手动调用 refreshSchema() | boolean | false |
构建一个邮箱、姓名表单:
@Component({
selector: 'app-home',
template: `
<sf [schema]="schema" (formSubmit)="submit($event)"></sf>
`
})
export class HomeComponent {
schema: SFSchema = {
properties: {
email: {
type: 'string',
title: '邮箱',
format: 'email',
maxLength: 20
},
name: {
type: 'string',
title: '姓名',
minLength: 3
}
}
};
submit(value: any) { }
}