数字

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

注意事项

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

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { YelonFormModule, SFNumberWidgetSchema, SFSchema } from '@yelon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-number-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
  standalone: true,
  imports: [YelonFormModule]
})
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 表示排除 minimumboolean-
[maximum]最大值number-
[exclusiveMaximum]约束是否包括 maximum 值,true 表示排除 maximumboolean-
[multipleOf]倍数number1

ui属性

成员说明类型默认值
[prefix]前缀,简化 nzFormatternzParser 的使用--
[unit]单位,简化 nzFormatternzParser 的使用--
[formatter]等同 nzFormatter--
[parser]等同 nzParser--
[precision]等同 nzPrecision--
[widgetWidth]指定 nz-number 宽度number, string90
[hideStep]隐藏步数操作区booleanfalse
[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);
Loading...