• Input输入框
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-input]directive
      • nz-input-groupcomponent

    Input输入框

    通过鼠标或键盘输入内容，是最基础的表单域的包装。

    何时使用

    • 需要用户输入表单域内容时。
    • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

    代码演示

    Input输入框 - 图1

    基本使用

    基本使用。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-basic',
    5.   template: `
    6.     <input nz-input placeholder="Basic usage" [(ngModel)]="value" />
    7.     <br />
    8.     <br />
    9.     <input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" />
    10.   `
    11. })
    12. export class NzDemoInputBasicComponent {
    13.   value: string;
    14. }

    Input输入框 - 图2

    前置/后置标签

    用于配置一些固定组合。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-addon',
    5.   template: `
    6.     <div style="margin-bottom: 16px;">
    7.       <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
    8.         <input type="text" nz-input [(ngModel)]="inputValue" />
    9.       </nz-input-group>
    10.     </div>
    11.     <div style="margin-bottom: 16px;">
    12.       <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
    13.         <input type="text" nz-input [(ngModel)]="inputValue" />
    14.       </nz-input-group>
    15.       <ng-template #addOnBeforeTemplate>
    16.         <nz-select [ngModel]="'Http://'">
    17.           <nz-option [nzLabel]="'Http://'" [nzValue]="'Http://'"></nz-option>
    18.           <nz-option [nzLabel]="'Https://'" [nzValue]="'Https://'"></nz-option>
    19.         </nz-select>
    20.       </ng-template>
    21.       <ng-template #addOnAfterTemplate>
    22.         <nz-select [ngModel]="'.com'">
    23.           <nz-option [nzLabel]="'.com'" [nzValue]="'.com'"></nz-option>
    24.           <nz-option [nzLabel]="'.jp'" [nzValue]="'.jp'"></nz-option>
    25.           <nz-option [nzLabel]="'.cn'" [nzValue]="'.cn'"></nz-option>
    26.           <nz-option [nzLabel]="'.org'" [nzValue]="'.org'"></nz-option>
    27.         </nz-select>
    28.       </ng-template>
    29.     </div>
    30.     <div style="margin-bottom: 16px;">
    31.       <nz-input-group [nzAddOnAfterIcon]="'setting'">
    32.         <input type="text" nz-input [(ngModel)]="inputValue" />
    33.       </nz-input-group>
    34.     </div>
    35.   `
    36. })
    37. export class NzDemoInputAddonComponent {
    38.   inputValue: string = 'my site';
    39. }

    Input输入框 - 图3

    搜索框

    带有搜索按钮的输入框。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-search-input',
    5.   template: `
    6.     <nz-input-group [nzSuffix]="suffixIconSearch">
    7.       <input type="text" nz-input placeholder="input search text" />
    8.     </nz-input-group>
    9.     <ng-template #suffixIconSearch>
    10.       <i nz-icon type="search"></i>
    11.     </ng-template>
    12.     <br />
    13.     <br />
    14.     <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
    15.       <input type="text" nz-input placeholder="input search text" />
    16.     </nz-input-group>
    17.     <ng-template #suffixIconButton>
    18.       <button nz-button nzType="primary" nzSearch><i nz-icon type="search"></i></button>
    19.     </ng-template>
    20.     <br />
    21.     <br />
    22.     <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
    23.       <input type="text" nz-input placeholder="input search text" />
    24.     </nz-input-group>
    25.     <ng-template #suffixButton>
    26.       <button nz-button nzType="primary" nzSize="large" nzSearch>Search</button>
    27.     </ng-template>
    28.   `
    29. })
    30. export class NzDemoInputSearchInputComponent {}

    Input输入框 - 图4

    适应文本高度的文本域

    nzAutosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 nzAutosize 可以设定为一个对象，指定最小行数和最大行数。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-autosize-textarea',
    5.   template: `
    6.     <div>
    7.       <textarea nz-input placeholder="Autosize height based on content lines" ngModel nzAutosize></textarea>
    8.       <div style="margin:24px 0;"></div>
    9.       <textarea
    10.         nz-input
    11.         placeholder="Autosize height with minimum and maximum number of lines"
    12.         [(ngModel)]="value"
    13.         [nzAutosize]="{ minRows: 2, maxRows: 6 }"
    14.       ></textarea>
    15.     </div>
    16.   `
    17. })
    18. export class NzDemoInputAutosizeTextareaComponent {
    19.   value: string;
    20. }

    Input输入框 - 图5

    前缀和后缀

    在输入框上添加前缀或后缀图标。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-presuffix',
    5.   template: `
    6.     <nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
    7.       <input type="text" nz-input placeholder="Enter your username" />
    8.     </nz-input-group>
    9.     <ng-template #prefixTemplate><i nz-icon type="user"></i></ng-template>
    10.     <ng-template #suffixTemplate><i nz-icon nz-tooltip nzTitle="Extra information" type="info-circle"></i></ng-template>
    11.   `
    12. })
    13. export class NzDemoInputPresuffixComponent {}

    Input输入框 - 图6

    带移除图标

    带移除图标的输入框，点击图标删除所有内容。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-allow-clear',
    5.   template: `
    6.     <nz-input-group [nzSuffix]="suffixTemplate">
    7.       <input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
    8.     </nz-input-group>
    9.     <ng-template #suffixTemplate
    10.       ><i
    11.         nz-icon
    12.         nz-tooltip
    13.         class="ant-input-clear-icon"
    14.         nzTheme="fill"
    15.         nzType="close-circle"
    16.         *ngIf="inputValue"
    17.         (click)="inputValue = null"
    18.       ></i
    19.     ></ng-template>
    20.   `
    21. })
    22. export class NzDemoInputAllowClearComponent {
    23.   inputValue: string | null;
    24. }

    Input输入框 - 图7

    三种大小

    我们为 nz-input 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

    注意： 在表单里面，我们只使用大尺寸的输入框。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-size',
    5.   template: `
    6.     <div class="example-input">
    7.       <input nz-input placeholder="large size" nzSize="large" />
    8.       <input nz-input placeholder="default size" nzSize="default" />
    9.       <input nz-input placeholder="small size" nzSize="small" />
    10.     </div>
    11.   `,
    12.   styles: [
    13.     `
    14.       .example-input .ant-input {
    15.         width: 200px;
    16.         margin: 0 8px 8px 0;
    17.       }
    18.     `
    19.   ]
    20. })
    21. export class NzDemoInputSizeComponent {}

    Input输入框 - 图8

    输入框组合

    输入框的组合展现。

    注意：使用 nzCompact 模式时，不需要通过 nz-col 来控制宽度。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-group',
    5.   template: `
    6.     <nz-input-group [nzSize]="'large'">
    7.       <div nz-col nzSpan="4">
    8.         <input type="text" nz-input [ngModel]="'0571'" />
    9.       </div>
    10.       <div nz-col nzSpan="8">
    11.         <input type="text" nz-input [ngModel]="'26888888'" />
    12.       </div>
    13.     </nz-input-group>
    14.     <br />
    15.     <nz-input-group nzCompact>
    16.       <input type="text" nz-input [ngModel]="'0571'" style="width: 20%;" />
    17.       <input type="text" nz-input [ngModel]="'26888888'" style="width:30%;" />
    18.     </nz-input-group>
    19.     <br />
    20.     <nz-input-group nzCompact>
    21.       <nz-select [ngModel]="'Zhejiang'">
    22.         <nz-option [nzLabel]="'Zhejiang'" [nzValue]="'Zhejiang'"></nz-option>
    23.         <nz-option [nzLabel]="'Jiangsu'" [nzValue]="'Jiangsu'"></nz-option>
    24.       </nz-select>
    25.       <input type="text" nz-input [ngModel]="'Xihu District, Hangzhou'" style="width:50%;" />
    26.     </nz-input-group>
    27.     <br />
    28.     <nz-input-group nzCompact>
    29.       <nz-select [ngModel]="'Option1'">
    30.         <nz-option [nzLabel]="'Option1'" [nzValue]="'Option1'"></nz-option>
    31.         <nz-option [nzLabel]="'Option2'" [nzValue]="'Option2'"></nz-option>
    32.       </nz-select>
    33.       <input type="text" nz-input [ngModel]="'input content'" style="width:50%;" />
    34.       <nz-input-number></nz-input-number>
    35.     </nz-input-group>
    36.     <br />
    37.     <nz-input-group nzCompact>
    38.       <input type="text" nz-input [ngModel]="'input content'" style="width:50%;" />
    39.       <nz-date-picker></nz-date-picker>
    40.     </nz-input-group>
    41.     <br />
    42.     <nz-input-group nzCompact>
    43.       <nz-select [ngModel]="'Option1-1'">
    44.         <nz-option [nzLabel]="'Option1-1'" [nzValue]="'Option1-1'"></nz-option>
    45.         <nz-option [nzLabel]="'Option1-2'" [nzValue]="'Option1-2'"></nz-option>
    46.       </nz-select>
    47.       <nz-select [ngModel]="'Option2-1'">
    48.         <nz-option [nzLabel]="'Option2-1'" [nzValue]="'Option2-1'"></nz-option>
    49.         <nz-option [nzLabel]="'Option2-2'" [nzValue]="'Option2-2'"></nz-option>
    50.       </nz-select>
    51.     </nz-input-group>
    52.     <br />
    53.     <nz-input-group nzCompact>
    54.       <nz-select [ngModel]="'Between'">
    55.         <nz-option [nzLabel]="'Between'" [nzValue]="'Between'"></nz-option>
    56.         <nz-option [nzLabel]="'Except'" [nzValue]="'Except'"></nz-option>
    57.       </nz-select>
    58.       <input type="text" nz-input placeholder="Minimum" style="width:100px; text-align: center;" />
    59.       <input
    60.         type="text"
    61.         disabled
    62.         nz-input
    63.         placeholder="~"
    64.         style="width: 30px; border-left: 0px; pointer-events: none; background-color: rgb(255, 255, 255);"
    65.       />
    66.       <input type="text" nz-input placeholder="Maximum" style="width: 100px; text-align: center; border-left: 0px;" />
    67.     </nz-input-group>
    68.     <br />
    69.     <nz-input-group nzCompact>
    70.       <nz-select [ngModel]="'Sign Up'">
    71.         <nz-option [nzLabel]="'Sign Up'" [nzValue]="'Sign Up'"></nz-option>
    72.         <nz-option [nzLabel]="'Sign In'" [nzValue]="'Sign In'"></nz-option>
    73.       </nz-select>
    74.       <input type="email" nz-input placeholder="Email" style="width: 200px;" />
    75.     </nz-input-group>
    76.     <br />
    77.     <nz-input-group nzCompact>
    78.       <nz-select [ngModel]="'Home'" style="width: 30%;">
    79.         <nz-option [nzLabel]="'Home'" [nzValue]="'Home'"></nz-option>
    80.         <nz-option [nzLabel]="'Company'" [nzValue]="'Company'"></nz-option>
    81.       </nz-select>
    82.       <nz-cascader [nzOptions]="options" style="width: 70%;"></nz-cascader>
    83.     </nz-input-group>
    84.   `
    85. })
    86. export class NzDemoInputGroupComponent {
    87.   options = [
    88.     {
    89.       value: 'zhejiang',
    90.       label: 'Zhejiang',
    91.       children: [
    92.         {
    93.           value: 'hangzhou',
    94.           label: 'Hangzhou',
    95.           children: [
    96.             {
    97.               value: 'xihu',
    98.               label: 'West Lake',
    99.               isLeaf: true
    100.             }
    101.           ]
    102.         },
    103.         {
    104.           value: 'ningbo',
    105.           label: 'Ningbo',
    106.           isLeaf: true
    107.         }
    108.       ]
    109.     },
    110.     {
    111.       value: 'jiangsu',
    112.       label: 'Jiangsu',
    113.       children: [
    114.         {
    115.           value: 'nanjing',
    116.           label: 'Nanjing',
    117.           children: [
    118.             {
    119.               value: 'zhonghuamen',
    120.               label: 'Zhong Hua Men',
    121.               isLeaf: true
    122.             }
    123.           ]
    124.         }
    125.       ]
    126.     }
    127.   ];
    128. }

    Input输入框 - 图9

    文本域

    用于多行输入。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-textarea',
    5.   template: `
    6.     <textarea rows="4" nz-input [(ngModel)]="inputValue"></textarea>
    7.   `,
    9.   styles: []
    10. })
    11. export class NzDemoInputTextareaComponent {
    12.   inputValue: string;
    13. }

    Input输入框 - 图10

    输入时格式化展示

    结合 Tooltip 组件，实现一个数值输入框，方便内容超长时的全量展现。

    1. import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-tooltip',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-tooltip nzTrigger="focus" nzPlacement="topLeft" nzOverlayClassName="numeric-input" [nzTitle]="title">
    8.       <input
    9.         #inputElement
    10.         style="width: 120px"
    11.         nz-input
    12.         nz-tooltip
    13.         placeholder="Input a number"
    14.         [ngModel]="value"
    15.         (ngModelChange)="onChange($event)"
    16.         (blur)="onBlur()"
    17.       />
    18.     </nz-tooltip>
    19.   `,
    20.   styles: [
    21.     `
    22.       .numeric-input .ant-tooltip-inner {
    23.         min-width: 32px;
    24.         min-height: 37px;
    25.       }
    27.       .numeric-input .numeric-input-title {
    28.         font-size: 14px;
    29.       }
    30.     `
    31.   ]
    32. })
    33. export class NzDemoInputTooltipComponent {
    34.   value = '';
    35.   title = 'Input a number';
    37.   @ViewChild('inputElement') inputElement: ElementRef;
    39.   onChange(value: string): void {
    40.     this.updateValue(value);
    41.   }
    43.   // '.' at the end or only '-' in the input box.
    44.   onBlur(): void {
    45.     if (this.value.charAt(this.value.length - 1) === '.' || this.value === '-') {
    46.       this.updateValue(this.value.slice(0, -1));
    47.     }
    48.   }
    50.   updateValue(value: string): void {
    51.     const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    52.     if ((!isNaN(+value) && reg.test(value)) || value === '' || value === '-') {
    53.       this.value = value;
    54.     }
    55.     this.inputElement.nativeElement.value = this.value;
    56.     this.updateTitle();
    57.   }
    59.   updateTitle(): void {
    60.     this.title = (this.value !== '-' ? this.formatNumber(this.value) : '-') || 'Input a number';
    61.   }
    63.   formatNumber(value: string): string {
    64.     const string = `${value}`;
    65.     const list = string.split('.');
    66.     const prefix = list[0].charAt(0) === '-' ? '-' : '';
    67.     let num = prefix ? list[0].slice(1) : list[0];
    68.     let result = '';
    69.     while (num.length > 3) {
    70.       result = `,${num.slice(-3)}${result}`;
    71.       num = num.slice(0, num.length - 3);
    72.     }
    73.     if (num) {
    74.       result = num + result;
    75.     }
    76.     return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
    77.   }
    78. }

    Input输入框 - 图11

    密码框

    密码框。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-input-password-input',
    5.   template: `
    6.     <nz-input-group [nzSuffix]="suffixTemplate">
    7.       <input
    8.         [type]="passwordVisible ? 'text' : 'password'"
    9.         nz-input
    10.         placeholder="input password"
    11.         [(ngModel)]="password"
    12.       />
    13.     </nz-input-group>
    14.     <ng-template #suffixTemplate>
    15.       <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
    16.     </ng-template>
    17.   `,
    18.   styles: [
    19.     `
    20.       i {
    21.         cursor: pointer;
    22.       }
    23.     `
    24.   ]
    25. })
    26. export class NzDemoInputPasswordInputComponent {
    27.   passwordVisible = false;
    28.   password: string;
    29. }

    API

    单独引入此组件

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

    1. import { NzInputModule } from 'ng-zorro-antd';

    [nz-input]directive

    nz-input 可以使用所有的W3C标准下的所有 使用方式 和 Angular对 input 的全部额外功能支持。

    参数说明类型默认值
    [nzSize]控件大小。注：标准表单内的输入框大小限制为 large'large'｜'small'｜'default''default'
    [nzAutosize]只可以用于 textarea，自适应内容高度，可设置为 boolean 或对象：{ minRows: 2, maxRows: 6 }boolean｜{ minRows: number, maxRows: number }false

    nz-input-groupcomponent

    参数说明类型默认值
    [nzAddOnAfter]带标签的 input，设置后置标签string｜TemplateRef<void>-
    [nzAddOnBefore]带标签的 input，设置前置标签string｜TemplateRef<void>-
    [nzPrefix]带有前缀图标的 inputstring｜TemplateRef<void>-
    [nzSuffix]带有后缀图标的 inputstring｜TemplateRef<void>-
    [nzCompact]是否用紧凑模式booleanfalse
    [nzSearch]是否用搜索框booleanfalse
    [nzSize]nz-input-group 中所有的 nz-input 的大小'large'｜'small'｜'default''default'