Input输入框

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

基本使用

基本使用。

@Component({
  selector: 'nz-demo-input-basic',
  template: `
    <input nz-input placeholder="Basic usage" [(ngModel)]="value" />
    <br />
    <br />
    <input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" />
  `
})
export class NzDemoInputBasicComponent {
  value?: string;
}

前置/后置标签

用于配置一些固定组合。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-addon',
  template: `
    <div>
      <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
        <input type="text" nz-input [(ngModel)]="inputValue" />
      </nz-input-group>
    </div>
    <div>
      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
        <input type="text" nz-input [(ngModel)]="inputValue" />
      </nz-input-group>
      <ng-template #addOnBeforeTemplate>
        <nz-select [ngModel]="'Http://'">
          <nz-option nzLabel="Http://" nzValue="Http://"></nz-option>
          <nz-option nzLabel="Https://" nzValue="Https://"></nz-option>
        </nz-select>
      </ng-template>
      <ng-template #addOnAfterTemplate>
        <nz-select [ngModel]="'.com'">
          <nz-option nzLabel=".com" nzValue=".com"></nz-option>
          <nz-option nzLabel=".jp" nzValue=".jp"></nz-option>
          <nz-option nzLabel=".cn" nzValue=".cn"></nz-option>
          <nz-option nzLabel=".org" nzValue=".org"></nz-option>
        </nz-select>
      </ng-template>
    </div>
    <div>
      <nz-input-group nzAddOnAfterIcon="setting">
        <input type="text" nz-input [(ngModel)]="inputValue" />
      </nz-input-group>
    </div>
  `,
  styles: [
    `
      div {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoInputAddonComponent {
  inputValue: string = 'my site';
}

搜索框

带有搜索按钮的输入框。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-search-input',
  template: `
    <nz-input-group [nzSuffix]="suffixIconSearch">
      <input type="text" nz-input placeholder="input search text" />
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon nzType="search"></i>
    </ng-template>
    <br />
    <br />
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="input search text" />
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>
    <br />
    <br />
    <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
      <input type="text" nz-input placeholder="input search text" />
    </nz-input-group>
    <ng-template #suffixButton>
      <button nz-button nzType="primary" nzSize="large" nzSearch>Search</button>
  `
})
export class NzDemoInputSearchInputComponent {}

适应文本高度的文本域

前缀和后缀

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-presuffix',
  template: `
    <nz-input-group [nzSuffix]="suffixTemplateInfo" [nzPrefix]="prefixTemplateUser">
      <input type="text" nz-input placeholder="Enter your username" />
    </nz-input-group>
    <ng-template #prefixTemplateUser><i nz-icon nzType="user"></i></ng-template>
    <ng-template #suffixTemplateInfo><i nz-icon nz-tooltip nzTooltipTitle="Extra information" nzType="info-circle"></i></ng-template>
    <br />
    <br />
    <nz-input-group nzSuffix="RMB" nzPrefix="￥">
    </nz-input-group>
  `
})
export class NzDemoInputPresuffixComponent {}

带移除图标

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-allow-clear',
  template: `
    <nz-input-group [nzSuffix]="inputClearTpl">
      <input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
    </nz-input-group>
    <ng-template #inputClearTpl
      ><i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue" (click)="inputValue = null"></i
    ></ng-template>
    <br />
    <br />
    <nz-input-group [nzSuffix]="textAreaClearTpl" class="ant-input-affix-wrapper-textarea-with-clear-btn">
      <textarea nz-input [(ngModel)]="textValue" placeholder="textarea with clear icon"></textarea>
    </nz-input-group>
    <ng-template #textAreaClearTpl
      ><i
        nz-icon
        class="ant-input-textarea-clear-icon"
        nzTheme="fill"
        nzType="close-circle"
        *ngIf="textValue"
        (click)="textValue = null"
      ></i
    ></ng-template>
  `
})
export class NzDemoInputAllowClearComponent {
  inputValue: string | null = null;
  textValue: string | null = null;
}

三种大小

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-size',
  template: `
    <div class="example-input">
      <input nz-input placeholder="large size" nzSize="large" />
      <input nz-input placeholder="default size" nzSize="default" />
      <input nz-input placeholder="small size" nzSize="small" />
    </div>
  `,
  styles: [
    `
      .example-input .ant-input {
        width: 200px;
        margin: 0 8px 8px 0;
      }
    `
  ]
})
export class NzDemoInputSizeComponent {}

输入框的组合展现。

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

文本域

用于多行输入。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-textarea',
  template: `
    <textarea rows="4" nz-input [(ngModel)]="inputValue"></textarea>
  `
})
export class NzDemoInputTextareaComponent {
  inputValue?: string;
}

输入时格式化展示

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

import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'nz-demo-input-tooltip',
  encapsulation: ViewEncapsulation.None,
  template: `
    <input
      #inputElement
      nz-input
      nz-tooltip
      nzTooltipTrigger="focus"
      nzTooltipPlacement="topLeft"
      nzOverlayClassName="numeric-input"
      [ngModel]="value"
      [nzTooltipTitle]="title"
      placeholder="Input a number"
      (ngModelChange)="onChange($event)"
      (blur)="onBlur()"
    />
  `,
  styles: [
    `
      .numeric-input .ant-tooltip-inner {
        min-width: 32px;
        min-height: 37px;
      }
      .numeric-input .numeric-input-title {
        font-size: 14px;
      }
  ]
})
export class NzDemoInputTooltipComponent {
  value = '';
  title = 'Input a number';
  @ViewChild('inputElement', { static: false }) inputElement?: ElementRef;
  onChange(value: string): void {
    this.updateValue(value);
  }
  // '.' at the end or only '-' in the input box.
  onBlur(): void {
    if (this.value.charAt(this.value.length - 1) === '.' || this.value === '-') {
      this.updateValue(this.value.slice(0, -1));
    }
  }
  updateValue(value: string): void {
    const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    if ((!isNaN(+value) && reg.test(value)) || value === '' || value === '-') {
      this.value = value;
    }
    this.inputElement!.nativeElement.value = this.value;
    this.updateTitle();
  }
  updateTitle(): void {
    this.title = (this.value !== '-' ? this.formatNumber(this.value) : '-') || 'Input a number';
  }
  formatNumber(value: string): string {
    const stringValue = `${value}`;
    const list = stringValue.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';
    while (num.length > 3) {
      result = `,${num.slice(-3)}${result}`;
      num = num.slice(0, num.length - 3);
    }
    if (num) {
      result = num + result;
    }
    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  }
}

密码框

密码框。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-input-password-input',
  template: `
    <nz-input-group [nzSuffix]="suffixTemplate">
      <input [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="input password" [(ngModel)]="password" />
    </nz-input-group>
    <ng-template #suffixTemplate>
      <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
    </ng-template>
  `,
  styles: [
    `
      i {
        cursor: pointer;
      }
    `
  ]
})
export class NzDemoInputPasswordInputComponent {
  passwordVisible = false;
}

nz-input-groupcomponent