Input输入框

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

何时使用

  • 需要用户输入表单域内容时。
  • 提供组合型输入框,带搜索的输入框,还可以进行大小选择。
  1. import { NzInputModule } from 'ng-zorro-antd/input';

代码演示Input输入框 - 图2

Input输入框 - 图3

基本使用

基本使用。

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

Input输入框 - 图4

前置/后置标签

用于配置一些固定组合。

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

Input输入框 - 图5

搜索框

带有搜索按钮的输入框。

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

Input输入框 - 图6

适应文本高度的文本域

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

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

Input输入框 - 图7

前缀和后缀

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

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

Input输入框 - 图8

带移除图标

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

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

Input输入框 - 图9

三种大小

我们为 nz-input 输入框定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

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

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

Input输入框 - 图10

输入框组合

输入框的组合展现。

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

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

Input输入框 - 图11

文本域

用于多行输入。

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

Input输入框 - 图12

输入时格式化展示

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

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

Input输入框 - 图13

密码框

密码框。

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

API

[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,设置后置标签,可以与 nzAddOnBefore 配合使用string | TemplateRef<void>-
[nzAddOnBefore]带标签的 input,设置前置标签,可以与 nzAddOnAfter 配合使用string | TemplateRef<void>-
[nzPrefix]带有前缀图标的 input,可以与 nzSuffix 配合使用string | TemplateRef<void>-
[nzSuffix]带有后缀图标的 input,可以与 nzPrefix 配合使用string | TemplateRef<void>-
[nzCompact]是否用紧凑模式booleanfalse
[nzSearch]是否用搜索框booleanfalse
[nzSize]nz-input-group 中所有的 nz-input 的大小‘large’ | ‘small’ | ‘default’‘default’