NG-ALAIN- 文档
开始使用 Schema 校验错误 自定义小部件 如何布局 常见问题
- Examples
在线校验器 acl ACL visibleIf 条件表达式 i18n 国际化 method 内置方法 modal 模态框
- 小部件
object 对象 array 数组 string 文本框 boolean 开关 number 数字 select 选择器 checkbox 多选框 custom 自定义 date 日期 radio 单选框 text 文本 textarea 多行文本框
- 非内置小部件
autocomplete 自动完成 cascader 级联选择 color 颜色 mention 提及 qr-code 二维码 rate 评分 segmented 分段控制器 slider 滑动输入条 tag 标签 time 时间 transfer 穿梭框 tree-select 树选择 upload 上传
- 第三方小部件
monaco-editor Monaco Editor tinymce Tinymce富文本
代码演示
最简单的用法。
import { Component, inject } from '@angular/core';
import { DelonFormModule, SFNumberWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'form-number-simple',
template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
standalone: true,
imports: [DelonFormModule]
})
export class FormNumberSimpleComponent {
private readonly msg = inject(NzMessageService);
schema: SFSchema = {
properties: {
number: {
type: 'number',
minimum: 18,
maximum: 100,
multipleOf: 2,
ui: { widgetWidth: 200 } as SFNumberWidgetSchema
},
integer: { type: 'integer', default: 10, ui: { widgetWidth: '100%' } as SFNumberWidgetSchema },
unit: { type: 'number', default: 10, ui: { unit: '%' } as SFNumberWidgetSchema },
prefix: { type: 'number', default: 10, ui: { prefix: '$' } as SFNumberWidgetSchema },
hideStep: { type: 'number', default: 10, ui: { hideStep: true } as SFNumberWidgetSchema }
}
};
submit(value: {}): void {
this.msg.success(JSON.stringify(value));
}
}API
schema属性
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[minimum] | 最小值 | number | - |
[exclusiveMinimum] | 约束是否包括 minimum 值，true 表示排除 minimum 值 | boolean | - |
[maximum] | 最大值 | number | - |
[exclusiveMaximum] | 约束是否包括 maximum 值，true 表示排除 maximum 值 | boolean | - |
[multipleOf] | 倍数 | number | 1 |
ui属性
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[prefix] | 前缀，简化 nzFormatter、nzParser 的使用 | - | - |
[unit] | 单位，简化 nzFormatter、nzParser 的使用 | - | - |
[formatter] | 等同 nzFormatter | - | - |
[parser] | 等同 nzParser | - | - |
[precision] | 等同 nzPrecision | - | - |
[widgetWidth] | 指定 nz-number 宽度 | number, string | 90 |
[hideStep] | 隐藏步数操作区 | boolean | false |
[change] | 变更事件 | (val?: number) => void | - |
QA
为什么unit无法变更
NG-ZORRO 所有组件都是 OnPush 模式，一种特殊情况是当需要动态修改 unit 时，由于需要触发一次 ngModel 变更时才会生效，因此需要使其值发生变更，例如：
const ageProperty = this.sf.getProperty('/age')!;
ageProperty.widget.ui.unit = 'c';
ageProperty.widget.setValue(null);
ageProperty.widget.setValue(statusProperty.value);