InputNumber数字输入框

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

何时使用

当需要获取标准数值时。

  1. import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

代码演示

InputNumber数字输入框 - 图1

基本

数字输入框。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-basic',
  4. template: `
  5. <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  6. `
  7. })
  8. export class NzDemoInputNumberBasicComponent {
  9. demoValue = 3;
  10. }

InputNumber数字输入框 - 图2

不可用

点击按钮切换可用状态。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-disabled',
  4. template: `
  5. <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
  6. <div style="margin-top:20px;">
  7. <button nz-button [nzType]="'primary'" (click)="toggleDisabled()">
  8. <span>Toggle Disabled</span>
  9. </button>
  10. </div>
  11. `
  12. })
  13. export class NzDemoInputNumberDisabledComponent {
  14. demoValue = 3;
  15. isDisabled = false;
  16. toggleDisabled(): void {
  17. this.isDisabled = !this.isDisabled;
  18. }
  19. }

InputNumber数字输入框 - 图3

格式化展示

通过 nzFormatter 格式化数字,以展示具有具体含义的数据,往往需要配合 nzParser 一起使用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-formatter',
  4. template: `
  5. <nz-input-number
  6. [(ngModel)]="demoValue"
  7. [nzMin]="1"
  8. [nzMax]="100"
  9. [nzStep]="1"
  10. [nzFormatter]="formatterDollar"
  11. [nzParser]="parserDollar"
  12. ></nz-input-number>
  13. <nz-input-number
  14. [(ngModel)]="demoValue"
  15. [nzMin]="1"
  16. [nzMax]="100"
  17. [nzStep]="1"
  18. [nzFormatter]="formatterPercent"
  19. [nzParser]="parserPercent"
  20. ></nz-input-number>
  21. `,
  22. styles: [
  23. `
  24. nz-input-number {
  25. margin-right: 8px;
  26. }
  27. `
  28. ]
  29. })
  30. export class NzDemoInputNumberFormatterComponent {
  31. demoValue = 100;
  32. formatterPercent = (value: number) => `${value} %`;
  33. parserPercent = (value: string) => value.replace(' %', '');
  34. formatterDollar = (value: number) => `$ ${value}`;
  35. parserDollar = (value: string) => value.replace('$ ', '');
  36. }

InputNumber数字输入框 - 图4

三种大小

三种大小的数字输入框,当 nzSize 分别为 largesmall 时,输入框高度为 40px24px ,默认高度为 32px

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-size',
  4. template: `
  5. <nz-input-number [(ngModel)]="demoValue" [nzSize]="'large'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  6. <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  7. <nz-input-number [(ngModel)]="demoValue" [nzSize]="'small'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  8. `,
  9. styles: [
  10. `
  11. nz-input-number {
  12. margin-right: 8px;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoInputNumberSizeComponent {
  18. demoValue = 3;
  19. }

InputNumber数字输入框 - 图5

小数

和原生的数字输入框一样,value 的精度由 nzStep 的小数位数决定。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-digit',
  4. template: `
  5. <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="0.1" [nzPlaceHolder]="'Digital'"></nz-input-number>
  6. `
  7. })
  8. export class NzDemoInputNumberDigitComponent {
  9. demoValue: number;
  10. }

InputNumber数字输入框 - 图6

精度

指定 value 的精度

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-number-precision',
  4. template: `
  5. <nz-input-number [(ngModel)]="toFixedValue" [nzPrecision]="precision" nzPlaceHolder="toFixed"></nz-input-number>
  6. <nz-input-number [(ngModel)]="cutValue" [nzPrecision]="precision" nzPrecisionMode="cut" nzPlaceHolder="cut off"></nz-input-number>
  7. <nz-input-number
  8. [(ngModel)]="customFnValue"
  9. [nzPrecision]="precision"
  10. [nzPrecisionMode]="customPrecisionFn"
  11. nzPlaceHolder="cut off"
  12. ></nz-input-number>
  13. `,
  14. styles: [
  15. `
  16. nz-input-number {
  17. margin-right: 8px;
  18. }
  19. `
  20. ]
  21. })
  22. export class NzDemoInputNumberPrecisionComponent {
  23. toFixedValue = 2;
  24. cutValue = 2;
  25. customFnValue = 2;
  26. precision = 2;
  27. customPrecisionFn(value: number, precision: number): number {
  28. return +Number(value).toFixed(precision + 1);
  29. }
  30. }

API

nz-input-numbercomponent

成员说明类型默认值
[ngModel]当前值,可双向绑定number | string | string-
[nzAutoFocus]自动获取焦点booleanfalse
[nzDisabled]禁用booleanfalse
[nzMax]最大值numberInfinity
[nzMin]最小值number-Infinity
[nzFormatter]指定输入框展示值的格式(value: number | string) => string | number-
[nzParser]指定从 nzFormatter 里转换回数字的方式,和 nzFormatter 搭配使用(value: string) => string | number(value: string) => value.trim().replace(/。/g, ‘.’).replace(/[^\w.-]+/g, ‘’)
[nzPrecision]数值精度number-
[nzPrecisionMode]数值精度的取值方式‘cut’ | ‘toFixed’ | ((value: number | string, precision?: number) => number)‘toFixed’
[nzSize]输入框大小‘large’ | ‘small’ | ‘default’‘default’
[nzStep]每次改变步数,可以为小数number | string1
[nzPlaceHolder]选择框默认文字string-
[nzId]组件内部 input 的 id 值string-
(ngModelChange)数值改变时回调EventEmitter<number>-
(nzFocus)focus时回调EventEmitter<void>-
(nzBlur)blur时回调EventEmitter<void>-

方法

通过 ViewChild 等方法获得实例后调用

名称描述
focus()获取焦点
blur()移除焦点