数组

创建对象数组,只对 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.a5 个单位、items.b10 个单位。

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

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

代码演示

基础样例

最简单的用法。

expand codeexpand code
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]添加按钮类型,等同 nzTypestringdashed
[removable]是否包含移除按钮booleantrue
[removeTitle]移除按钮文本string移除
[required]当前项是否为必填,仅影响样式boolean-
[$items]数组元素类型UI描述SFUISchema移除
(add)添加回调,property 表示添加后的表单属性(property: FormProperty) => void-
(remove)移除回调(index: number) => void-