文档
- 开始使用
- 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富文本

数字

通过鼠标或键盘，输入范围内的数值

注意事项

若 type="integer" 会强制移除 minimum、maximum、multipleOf 参数的小数部分。

代码演示

基础样例

最简单的用法。

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)" /> `,
  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无法变更directive

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);

数字

注意事项

代码演示

API

schema属性

ui属性

QA

为什么unit无法变更directive

ng-alain

相关资源

社区