开始使用

@delon/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[]>

如何使用

安装 @delon/form 依赖包：

yarn add @delon/form

导入 DelonFormModule 模块：

import { DelonFormModule } from '@delon/form';
@NgModule({
  imports: [
    DelonFormModule.forRoot()
  ]
})
export class AppModule { }

虽然默认 @delon/form 校验是 ajv，但这并不是唯一的选择，你可以覆盖 SchemaValidatorFactory 使用其他校验类库，所以 ajv 并没有强制依赖；其实从另一个点来看将这种第三方类库统一在 scripts 加载才是更合理的，因此你依然要自己安装 ajv 并在 angular.json 中导入它：

yarn add ajv @types/ajv

angular.json

"scripts": [
  "node_modules/ajv/dist/ajv.bundle.js"
]

全局配置

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

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

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

API

sf

SFButton

SFValueChange

组件方法

注： 所有 path 采用 / 来分隔，例如：/user/name、/arr/0/name。

按钮说明

注意事项

• 值为 null 或 undefined 表示手动添加按钮，但保留容器

• 值为 none 表示手动添加按钮，且不保留容器

• 使用 spanLabelFixed 固定标签宽度时，若无 render.class 则默认为居中状态

自定义

当你希望自定义按钮时，务必设置 button 值为 null。

<sf #sf [button]="null">
  <button type="submit" nz-button [disabled]="!sf.valid">保存</button>
  <button (click)="sf.reset()" type="button" nz-button>重置</button>
</sf>

常见问题

mode有什么作用？

mode 只是快捷作用，且优先级高于一切，规则如下：

• default 默认模式，什么也不做

• search 搜索模式，自动设置 layout: inline、firstVisual: false、liveValidate: false、button.submit: '搜索'

• edit 编辑模式，自动设置 layout: horizontal、firstVisual: false、liveValidate: true、button.submit: '保存'

Schema国际化

sf 并不支持任何 Schema 国际化动作，这是因为本身 Schema 是一组 JSON 值，国际化的实现只需要提供不同语言版本即可。