fix(module: inputitem): fix inputitem extra support template (#353)

* fix(module: inputitem): fix inputitem extra support template * fix(module: inputitem): fix inputitem extra support template
NG-ZORRO · Mar 21, 2019 · aeb3cbe · aeb3cbe
1 parent 5dc49a4
commit aeb3cbe
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/components/input-item/doc/index.en-US.md b/components/input-item/doc/index.en-US.md
@@ -29,7 +29,7 @@ Properties | Descrition | Type | Default
 | onFocus    | callback that is called when the text input is focused | (val: string): void |  -  |
 | error       | whether to display error       | bool |  false  |
 | onErrorClick   | callback that is called when the error icon is clicked  | (e: Object): void | <span> </span> |
-| extra       | the right content of `InputItem`   | string or node |  ''  |
+| extra       | the right content of `InputItem`   | string or TemplateRef |  ''  |
 | onExtraClick      | callback that is called when the extra content is clicked | (e: Object): void | <span> </span> |
 | labelNumber  | number of label text, valid value is 2 to 7 | number | `5` |
 | updatePlaceholder | whether to replace the placeholder with cleared content | bool | false|

diff --git a/components/input-item/doc/index.zh-CN.md b/components/input-item/doc/index.zh-CN.md
@@ -32,7 +32,7 @@ subtitle: 文本输入
 | onFocus    | focus 事件触发的回调函数 | (val: string): void |  -  |
 | error       | 报错样式        | bool |  false  |
 | onErrorClick       | 点击报错 icon 触发的回调函数  | (e: Object): void |  无  |
-| extra       | 右边注释   | string or node |  ''  |
+| extra       | 右边注释   | string or TemplateRef |  ''  |
 | onExtraClick      | extra 点击事件触发的回调函数 | (e: Object): void |  无  |
 | labelNumber  | 标签的文字个数，可用`2-7`之间的数字 | number | `5` |
 | updatePlaceholder | 当清除内容时，是否将清除前的内容替换到 placeholder 中 | bool |  false  |

diff --git a/components/input-item/input-item.component.html b/components/input-item/input-item.component.html
@@ -48,6 +48,8 @@
   ></div>
   <div *ngIf="extra!==''"
        class="{{prefixCls}}-extra"
-       (click)="extraClick($event)"
-  >{{extra}}</div>
+       (click)="extraClick($event)">
+    <ng-container *ngIf="!ngTemplate">{{extra}}</ng-container>
+    <ng-template *ngIf="ngTemplate" [ngTemplateOutlet]="extra"></ng-template>
+  </div>
 </div>
diff --git a/components/input-item/input-item.component.spec.ts b/components/input-item/input-item.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, TemplateRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { InputItemModule } from './input-item.module';
@@ -214,8 +214,13 @@ describe('InputComponent', () => {
   it('should extra work', () => {
     component.extra = '$';
     fixture.detectChanges();
-    const extraEle = inputItem.nativeElement.querySelector('.am-input-extra');
+    let extraEle = inputItem.nativeElement.querySelector('.am-input-extra');
     expect(extraEle.innerText).toBe('$');
+
+    component.extra = component.extraTpl;
+    fixture.detectChanges();
+    extraEle = inputItem.nativeElement.querySelector('.am-input-extra');
+    expect(extraEle.innerText).toBe('#');
   });
   it('should labelNumber work', () => {
     component.labelNumber = 3;
@@ -430,6 +435,7 @@ describe('InputComponent', () => {
     </InputItem>
     <InputItem class="input-item-1" [(ngModel)]="modelValue"></InputItem>
     <div class="am-list-content" click = "blurFocus()">click to focus</div>
+    <ng-template #extraTemplate>#</ng-template>
  `
 })
 export class TestInputComponent {
@@ -442,9 +448,9 @@ export class TestInputComponent {
   disabled: boolean = false;
   clear: boolean = false;
   maxLength: number;
-  fontColor:string;
+  fontColor: string;
   error: boolean = false;
-  extra: string = '';
+  extra: string | TemplateRef<any> = '';
   labelNumber: number = 5;
   updatePlaceholder: boolean = false;
   prefixListCls: string = 'am-list';
@@ -456,6 +462,9 @@ export class TestInputComponent {
   @ViewChild(InputItem)
   inputItemComp: InputItem;
 
+  @ViewChild('extraTemplate')
+  extraTpl: TemplateRef<any>;
+
   errorClick = jasmine.createSpy('errorClick callback');
   extraClick = jasmine.createSpy('extraClick callback');
   focusFn = jasmine.createSpy('focus callback');

diff --git a/components/input-item/input-item.component.ts b/components/input-item/input-item.component.ts
@@ -9,7 +9,8 @@ import {
   HostBinding,
   Renderer2,
   ElementRef,
-  forwardRef
+  forwardRef,
+  TemplateRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -33,6 +34,7 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   pattern: string = '';
   autoFocus: boolean = false;
   inputType: string = 'text';
+  ngTemplate: boolean = false;
 
   private _el: HTMLElement;
   private _type: string = 'text';
@@ -44,7 +46,7 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   private _clear: boolean = false;
   private _maxLength: number;
   private _error: boolean = false;
-  private _extra: string = '';
+  private _extra: string | TemplateRef<any> = '';
   private _labelNumber: number = 5;
   private _updatePlaceholder: boolean = false;
   private _prefixListCls: string = 'am-list';
@@ -150,10 +152,15 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
     this.clsError = value;
   }
   @Input()
-  get extra(): string {
+  get extra(): string | TemplateRef<any> {
     return this._extra;
   }
-  set extra(value: string) {
+  set extra(value: string | TemplateRef<any>) {
+    if (value instanceof TemplateRef) {
+      this.ngTemplate = true;
+    } else {
+      this.ngTemplate = false;
+    }
     this._extra = value;
   }
   @Input()