开始使用

@yelon/form 是一个基于 JSON Schema 标准的动态构建表单。

特性

• 符合 JSON Schema 标准

• 基于 ng-zorro-antd 基础组件库

• 秉承 Ant Design 价值观

• 二十几种小部件

• 可自定义小部件满足业务需求

• 无任何第三方依赖，可适用所有 antd 项目

如何阅读

在开始之前需要知道文档的一些简单编写规则：

• 代码以 schema. 开头的表示 JSON Schema 对象属性

• 代码以 ui. 开头的表示 UI 对象属性

• 部分小部件数据源分为 静态 和 实时 两类

  • 静态 理解为 schema.enum 值，是符合 JSON Schema 标准，且限数组格式 any[]

  • 实时 理解为 ui.asyncData 值，非 JSON Schema 标准，格式 (input?: any) => Observable<SFSchemaEnumType[]>

如何使用

安装 @yelon/form 依赖包：

npm i -S @yelon/form

导入 YelonFormModule 模块：

import { YelonFormModule } from '@yelon/form';

@NgModule({
  imports: [
    YelonFormModule.forRoot()
  ]
})
export class AppModule { }

虽然默认 @yelon/form 校验是 ajv，但这并不是唯一的选择，你可以覆盖 SchemaValidatorFactory 使用其他校验类库。

全局配置

请参考全局配置，成员如下：

构建一个邮箱、姓名表单：

@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) { }
}