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'