number 数字

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

注意事项

  • type="integer"强制移除 minimummaximummultipleOf 参数的小数部分。

代码演示

number 数字 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { SFSchema, SFNumberWidgetSchema } from '@delon/form';
  4. @Component({
  5. selector: 'form-number-simple',
  6. template: `
  7. <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  8. `,
  9. })
  10. export class FormNumberSimpleComponent {
  11. schema: SFSchema = {
  12. properties: {
  13. number: { type: 'number', minimum: 18, maximum: 100, multipleOf: 2, ui: { widgetWidth: 200 } },
  14. integer: { type: 'integer', default: 10 },
  15. unit: { type: 'number', default: 10, ui: { unit: '%' } as SFNumberWidgetSchema },
  16. prefix: { type: 'number', default: 10, ui: { prefix: '$' } as SFNumberWidgetSchema },
  17. },
  18. };
  19. constructor(public msg: NzMessageService) {}
  20. submit(value: any) {
  21. this.msg.success(JSON.stringify(value));
  22. }
  23. }

API

schema 属性

成员说明类型默认值
[minimum]最小值number-
[exclusiveMinimum]约束是否包括 minimum 值,true 表示排除 minimumboolean-
[maximum]最大值number-
[exclusiveMaximum]约束是否包括 maximum 值,true 表示排除 maximumboolean-
[multipleOf]倍数number1

ui 属性

成员说明类型默认值
[prefix]前缀,简化 nzFormatternzParser 的使用--
[unit]单位,简化 nzFormatternzParser 的使用--
[formatter]等同 nzFormatter--
[parser]等同 nzParser--
[precision]等同 nzPrecision--
[widgetWidth]指定 nz-number 宽度number90