Input输入框

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

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

    基本使用。

    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. }

    带有搜索按钮的输入框。

    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 nzType="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 nzType="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. export class NzDemoInputSearchInputComponent {}

    Input输入框 - 图4

    适应文本高度的文本域

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

    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 nzType="user"></i></ng-template>
    10.     <ng-template #suffixTemplate
    11.       ><i nz-icon nz-tooltip nzTitle="Extra information" nzType="info-circle"></i
    12.     ></ng-template>
    13.   `
    14. })
    15. export class NzDemoInputPresuffixComponent {}

    Input输入框 - 图6

    带移除图标

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

    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. }

    我们为 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-textarea',
    5.   template: `
    6.     <textarea rows="4" nz-input [(ngModel)]="inputValue"></textarea>
    7.   `
    8. })
    9. export class NzDemoInputTextareaComponent {
    10.   inputValue: string;
    11. }

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

    密码框。

    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. }

    nz-input-groupcomponent

    参数说明类型默认值
    [nzAddOnAfter]带标签的 input，设置后置标签，可以与 nzAddOnBefore 配合使用string | TemplateRef<void>-
    [nzAddOnBefore]带标签的 input，设置前置标签，可以与 nzAddOnBefore 配合使用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 的大小'default'