import { Component, inject } from '@angular/core';
import { DelonFormModule, SFArrayWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'form-array-irregular',
template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
standalone: true,
imports: [DelonFormModule]
})
export class FormArrayIrregularComponent {
private readonly msg = inject(NzMessageService);
schema: SFSchema = {
properties: {
title: { type: 'string' },
market: { type: 'number' },
price: { type: 'number' },
skus: {
type: 'array',
title: 'Skus',
maxItems: 4,
default: [{}],
items: {
type: 'object',
properties: {
name: {
type: 'string',
title: '名称'
},
price: {
type: 'number',
title: '单价',
minimum: 1
},
stock: {
type: 'number',
minimum: 1
},
desc: {
type: 'string',
ui: {
grid: { span: 24 } // 单独设置desc元素在当前数组表单所占格数,24表示整行
}
}
},
required: ['name', 'price', 'stock'],
ui: {
grid: { span: 12 } // 针对数组内部表单统一设置,12表示一行两个
}
},
ui: {
grid: {
span: 24, // 单独设置Sku元素在整个表单所占格数,24表示整行
arraySpan: 12 // 设置数组每个索引所占格数,12表示一行两个
}
} as SFArrayWidgetSchema
},
desc: {
type: 'string',
ui: { grid: { span: 24 } }
}
},
required: ['title', 'market', 'price'],
ui: {
spanLabelFixed: 100,
grid: { span: 8 }
}
};
submit(value: {}): void {
this.msg.success(JSON.stringify(value));
}
}