NG-ALAIN- Documents
Getting Started Schema Validation Error Customize Widgets Layout FAQ
- Examples
在线校验器 aclACL Conditional expression i18nInternationalization modal模态框
- Widgets
arrayArray autocompleteAutocomplete booleanSwitch cascaderCascader checkboxCheckbox customCustom dateDate mentionMention numberInput Number objectObject radioRadio rangeSlider rateRate selectSelect stringInput tagTag textText textareaTextarea timeTime transferTransfer tree-selectTree Select uploadUpload
- Third Widgets
markdownMarkdown Editor tinymceTinymce Rich Text ueditorUeditor Rich Text
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
Simplest of usage.
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
| Property | Description | Type | Default |
|---|---|---|---|
[items] | Description of array element | SFSchema | - |
[minItems] | Minimum number of array element | number | - |
[maxItems] | Maximum number of array element | number | - |
[uniqueItems] | Element in array is unique | boolean | - |
ui
| Property | Description | Type | Default |
|---|---|---|---|
[addTitle] | Add button title | string | add |
[addType] | Add button type, equals to nzType | string | dashed |
[removable] | Whether includes remove button | boolean | true |
[removeTitle] | Remove button title | string | remove |
[required] | Add required style to current item | boolean | - |
[$items] | UI description of array element | SFUISchema | remove |
(add) | Add callback，property indicates form property after add | (property: FormProperty) => void | - |
(remove) | Remove callback | (index: number) => void | - |