文档
- 开始使用
- Schema
- 校验错误
- 自定义小部件
- 如何布局
- 常见问题
Examples
- 在线校验器
- aclACL
- visibleIf条件表达式
- i18n国际化
- modal模态框
小部件
- array数组
- autocomplete自动完成
- boolean开关
- cascader级联选择
- checkbox多选框
- custom自定义
- date日期
- mention提及
- number数字
- object对象
- radio单选框
- range滑动输入条
- rate评分
- select选择器
- string文本框
- tag标签
- text文本
- textarea多行文本框
- time时间
- transfer穿梭框
- tree-select树选择
- upload上传
第三方小部件
- markdownMarkdown编辑器
- tinymceTinymce富文本
- ueditorUeditor富文本

数组

创建对象数组，只对 schema.type="array" 时有效。

关于布局

数组的布局分为数组本身以及数组元素布局，arraySpan 决定每个数组元素占栅格数值。

Schema 内嵌 UI 风格：

const schema = {
  list: {
    type: 'array',
    items: {
      a: { type: 'string' },
      b: { type: 'number', ui: { spanLabel: 10 } }
    },
    ui: { spanLabel: 5, grid: { arraySpan: 12 } }
  }
};

注意： items 下所有属性都继承于 list.ui，最终 items.a 为 5 个单位、items.b 为 10 个单位。

Schema 与 UI 分开风格，假如上述 Schema 转化成 UI 写法：

const ui = {
  $list: {
    $items: {
      $b: { spanLabel: 10 }
    },
    spanLabel: 5,
    grid: { arraySpan: 12 }
  }
};

代码演示

基础样例

最简单的用法。

import { Component } from '@angular/core';
import { SFArrayWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-array-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormArraySimpleComponent {
  schema: SFSchema = {
    properties: {
      product: {
        type: 'array',
        title: '产品清单',
        maxItems: 4,
        items: {
          type: 'object',
          properties: {
            name: {
              type: 'string',
              title: '名称',
            },
            price: {
              type: 'number',
              title: '单价',
              minimum: 1,
            },
          },
          required: ['name', 'price'],
        },
        ui: { grid: { arraySpan: 12 } } as SFArrayWidgetSchema,
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema 属性

参数	说明	类型	默认值
`[items]`	数组元素类型描述	`SFSchema`	-
`[minItems]`	约束数组最小的元素个数	`number`	-
`[maxItems]`	约束数组最大的元素个数	`number`	-
`[uniqueItems]`	约束数组每个元素都不相同	`boolean`	-

ui 属性

参数	说明	类型	默认值
`[addTitle]`	添加按钮文本	`string`	`添加`
`[addType]`	添加按钮类型，等同 `nzType`	`string`	`dashed`
`[removable]`	是否包含移除按钮	`boolean`	`true`
`[removeTitle]`	移除按钮文本	`string`	`移除`
`[required]`	当前项是否为必填，仅影响样式	`boolean`	-
`[$items]`	数组元素类型UI描述	`SFUISchema`	`移除`
`(add)`	添加回调，`property` 表示添加后的表单属性	`(property: FormProperty) => void`	-
`(remove)`	移除回调	`(index: number) => void`	-

modal模态框 autocomplete自动完成

NG-ALAIN

数组

关于布局

代码演示

API

schema 属性

ui 属性

ng-alain

相关资源

社区