feat(module:input): support textarea with clear icon

close #4623
NG-ZORRO · Feb 10, 2020 · 0af9242 · 0af9242
1 parent 7af643b
commit 0af9242
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/components/input/demo/allow-clear.ts b/components/input/demo/allow-clear.ts
@@ -3,14 +3,30 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-input-allow-clear',
   template: `
-    <nz-input-group [nzSuffix]="suffixTemplate">
+    <nz-input-group [nzSuffix]="inputClearTpl">
       <input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
     </nz-input-group>
-    <ng-template #suffixTemplate
+    <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">
+      <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;
+  textValue: string | null;
 }
diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts
@@ -10,7 +10,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import { InputBoolean, NzSizeLDSType } from 'ng-zorro-antd/core';
 
 @Directive({
-  selector: '[nz-input]',
+  selector: 'input[nz-input],textarea[nz-input]',
   exportAs: 'nzInput',
   host: {
     '[class.ant-input-disabled]': 'disabled',