Input输入框

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

何时使用

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

代码演示

Input输入框 - 图1

基本使用

基本使用。

  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输入框 - 图2

前置/后置标签

用于配置一些固定组合。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-input-addon',
  4. template: `
  5. <div style="margin-bottom: 16px;">
  6. <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
  7. <input type="text" nz-input [(ngModel)]="inputValue" />
  8. </nz-input-group>
  9. </div>
  10. <div style="margin-bottom: 16px;">
  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 style="margin-bottom: 16px;">
  30. <nz-input-group [nzAddOnAfterIcon]="'setting'">
  31. <input type="text" nz-input [(ngModel)]="inputValue" />
  32. </nz-input-group>
  33. </div>
  34. `
  35. })
  36. export class NzDemoInputAddonComponent {
  37. inputValue: string = 'my site';
  38. }

Input输入框 - 图3

搜索框

带有搜索按钮的输入框。

  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 type="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 type="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输入框 - 图4

适应文本高度的文本域

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" ngModel nzAutosize></textarea>
  7. <div style="margin:24px 0;"></div>
  8. <textarea
  9. nz-input
  10. placeholder="Autosize height with minimum and maximum number of lines"
  11. [(ngModel)]="value"
  12. [nzAutosize]="{ minRows: 2, maxRows: 6 }"
  13. ></textarea>
  14. </div>
  15. `
  16. })
  17. export class NzDemoInputAutosizeTextareaComponent {
  18. value: string;
  19. }

Input输入框 - 图5

前缀和后缀

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

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

Input输入框 - 图6

带移除图标

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

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

Input输入框 - 图7

三种大小

我们为 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输入框 - 图8

输入框组合

输入框的组合展现。

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

Input输入框 - 图9

文本域

用于多行输入。

  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. styles: []
  8. })
  9. export class NzDemoInputTextareaComponent {
  10. inputValue: string;
  11. }

Input输入框 - 图10

输入时格式化展示

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

Input输入框 - 图11

密码框

密码框。

  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
  7. [type]="passwordVisible ? 'text' : 'password'"
  8. nz-input
  9. placeholder="input password"
  10. [(ngModel)]="password"
  11. />
  12. </nz-input-group>
  13. <ng-template #suffixTemplate>
  14. <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
  15. </ng-template>
  16. `,
  17. styles: [
  18. `
  19. i {
  20. cursor: pointer;
  21. }
  22. `
  23. ]
  24. })
  25. export class NzDemoInputPasswordInputComponent {
  26. passwordVisible = false;
  27. password: string;
  28. }

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'