InputNumber数字输入框

    当需要获取标准数值时。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    数字输入框。

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

    不可用

    点击按钮切换可用状态。

    InputNumber数字输入框 - 图3

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-number-formatter',
    5.   template: `
    6.     <nz-input-number
    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 {
    26.       }
    27.     `
    28.   ]
    29. })
    30.   demoValue = 100;
    31.   formatterPercent = (value: number) => `${value} %`;
    32.   parserPercent = (value: string) => value.replace(' %', '');
    33.   formatterDollar = (value: number) => `$ ${value}`;
    34.   parserDollar = (value: string) => value.replace('$ ', '');
    35. }

    三种大小

    三种大小的数字输入框，当 nzSize 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。

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

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

    方法

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

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