Array

Create array object, it's only valid when schema.type="array".

Layout

Array layout is divided into array itself and array element layout, arraySpan determines the number of grid of each array element.

UI embed in Schema:

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

Note: All attributes in items are inherited from list.ui, eventually, items.a has 5 units, items.b has 10 units.

Schema and UI are separated, above UI configuration will be converted to:

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

Examples

Basic Usage

Simplest of usage.

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

PropertyDescriptionTypeDefault
[items]Description of array elementSFSchema-
[minItems]Minimum number of array elementnumber-
[maxItems]Maximum number of array elementnumber-
[uniqueItems]Element in array is uniqueboolean-

ui

PropertyDescriptionTypeDefault
[addTitle]Add button titlestringadd
[addType]Add button type, equals to nzTypestringdashed
[removable]Whether includes remove buttonbooleantrue
[removeTitle]Remove button titlestringremove
[required]Add required style to current itemboolean-
[$items]UI description of array elementSFUISchemaremove
(add)Add callback,property indicates form property after add(property: FormProperty) => void-
(remove)Remove callback(index: number) => void-