array 数组

创建对象数组，只对 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 { NzMessageService } from 'ng-zorro-antd/message';
import { SFSchema, SFArrayWidgetSchema } from '@delon/form';
@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(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema 属性

ui 属性