feat(module: textarea-item): add ngModel (#162)

NG-ZORRO · Dec 12, 2018 · 6b60cca · 6b60cca
1 parent b54bd04
commit 6b60cca
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 46 deletions.
diff --git a/components/textarea-item/demo/basic.ts b/components/textarea-item/demo/basic.ts
@@ -137,15 +137,6 @@ export class DemoTextareaItemBasicComponent {
 
   inputErrorClick(e) {}
 
-  inputChange(e) {
-    if (e.replace(/\s/g, '').length < 11) {
-      this.error = true;
-    } else {
-      this.error = false;
-    }
-    this.value = e;
-  }
-
   clickFocus() {
     this.numberFocus = {
       focus: true,

diff --git a/components/textarea-item/doc/index.en-US.md b/components/textarea-item/doc/index.en-US.md
@@ -16,6 +16,7 @@ A foundational component for inputting multi-line text into the app via a keyboa
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
+| ngModel | 	Current value, double binding| String | false |
 | value | the value to show for the textarea for more information about controlled component)  | String | <span> </span> |
 | defaultValue | provides an initial value that will change when the user starts typing.  | String |  -  |
 | placeholder      | the string that will be rendered before text input has been entered. | String | ''  |

diff --git a/components/textarea-item/doc/index.zh-CN.md b/components/textarea-item/doc/index.zh-CN.md
@@ -17,6 +17,7 @@ subtitle: 多行输入
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
+| ngModel |  value, 双向绑定| String | 无 |
 | value    | value  | String |  无  |
 | defaultValue    | 设置初始默认值        | String |  -  |
 | placeholder      | placeholder        | String | ''  |

diff --git a/components/textarea-item/textarea-item.component.spec.ts b/components/textarea-item/textarea-item.component.spec.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { TextareaItemModule } from './textarea-item.module';
@@ -12,11 +13,12 @@ describe('TextareaComponent', () => {
   let textareaCustomEle;
   let textareaDirective;
   let textareaItem;
+  let textareaModel;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TestTextareaItemComponent],
-      imports: [TextareaItemModule]
+      imports: [TextareaItemModule,FormsModule]
     }).compileComponents();
   }));
 
@@ -25,6 +27,7 @@ describe('TextareaComponent', () => {
     component = fixture.componentInstance;
     textareaEle = fixture.debugElement.query(By.css('.text-1'));
     textareaCustomEle = fixture.debugElement.query(By.css('.text-2'));
+    textareaModel = fixture.debugElement.query(By.css('.text-3'));
     textareaDirective = fixture.debugElement.query(By.directive(TextareaItem));
     textareaItem = textareaDirective.nativeElement.querySelector('textarea');
     fixture.detectChanges();
@@ -41,6 +44,15 @@ describe('TextareaComponent', () => {
     textarea = textareaEle.nativeElement.querySelector('textarea');
     expect(textarea.value).toBe('');
   });
+  it('should ngModel work', () => {
+    // component.valueModel = 'ngmodel test';
+    // fixture.detectChanges();
+    let textarea = textareaModel.nativeElement.querySelector('textarea');
+    textarea.value = 'test-ng-model';
+    textarea.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    expect(component.valueModel).toBe('test-ng-model');
+  });
   it('should defaultValue work', () => {
     component.defaultValue = 'test';
     fixture.detectChanges();
@@ -193,42 +205,45 @@ describe('TextareaComponent', () => {
 @Component({
   selector: 'test-steps',
   template: `
-  <TextareaItem class="text-1"
-                [value]="value"
-                [name]="name"
-                [title]="title"
-                [placeholder]="placeholder"
-                [editable]="editable"
-                [disabled]="disabled"
-                [clear]="clear"
-                [error]="error"
-                [rows]="rows"
-                [count]="count"
-                [focus]="focus"
-                [autoFocus]="autoFocus"
-                [autoHeight]="autoHeight"
-                [labelNumber]="labelNumber"
-                [prefixListCls]="prefixListCls"
-                [defaultValue]="defaultValue"
-                (onChange)="changeFn($event)"
-                (onBlur)="blurFn()"
-                (onFocus)="focusFn()"
-                (onErrorClick)="errorClickFn()">
-  </TextareaItem>
-  <TextareaItem class="text-2"
-                [title]="customTitle"
-                [autoHeight]="true"
-                [labelNumber]="5">
-  </TextareaItem>
-  <ng-template #customTitle>
-     <img src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png" 
-          style="width:28px;height:28px" alt="" />
-  </ng-template>
-  <span (click)="clickTitle()">标题</span>
- `
+    <TextareaItem
+      class="text-1"
+      [value]="value"
+      [name]="name"
+      [title]="title"
+      [placeholder]="placeholder"
+      [editable]="editable"
+      [disabled]="disabled"
+      [clear]="clear"
+      [error]="error"
+      [rows]="rows"
+      [count]="count"
+      [focus]="focus"
+      [autoFocus]="autoFocus"
+      [autoHeight]="autoHeight"
+      [labelNumber]="labelNumber"
+      [prefixListCls]="prefixListCls"
+      [defaultValue]="defaultValue"
+      (onChange)="changeFn($event)"
+      (onBlur)="blurFn()"
+      (onFocus)="focusFn()"
+      (onErrorClick)="errorClickFn()"
+    >
+    </TextareaItem>
+    <TextareaItem class="text-2" [title]="customTitle" [autoHeight]="true" [labelNumber]="5"> </TextareaItem>
+    <TextareaItem class="text-3" [(ngModel)]="valueModel"> </TextareaItem>
+    <ng-template #customTitle>
+      <img
+        src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"
+        style="width:28px;height:28px"
+        alt=""
+      />
+    </ng-template>
+    <span (click)="clickTitle()">标题</span>
+  `
 })
 export class TestTextareaItemComponent {
   value: string;
+  valueModel: string = 'ngmodel test';
   defaultValue: string = '';
   placeholder: string = '';
   editable: boolean = true;

diff --git a/components/textarea-item/textarea-item.component.ts b/components/textarea-item/textarea-item.component.ts
@@ -9,7 +9,7 @@ import {
   AfterContentChecked,
   forwardRef
 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'TextareaItem , nzm-textarea-item',
@@ -20,9 +20,9 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
       useExisting: forwardRef(() => TextareaItem),
       multi: true
     }
-  ],
+  ]
 })
-export class TextareaItem implements OnInit, AfterContentChecked {
+export class TextareaItem implements OnInit, AfterContentChecked, ControlValueAccessor {
   prefixCls: string = 'am-textarea';
   wrapCls: object;
   labelCls: object;
@@ -65,6 +65,7 @@ export class TextareaItem implements OnInit, AfterContentChecked {
     }
     this._value = v;
     this.textRef.nativeElement.value = this._value;
+    this._onChange(this._value);
   }
   @Input()
   get defaultValue(): string {
@@ -187,6 +188,8 @@ export class TextareaItem implements OnInit, AfterContentChecked {
 
   constructor() {}
 
+  _onChange = (_: any) => {};
+
   setCls() {
     this.hasCount = this._count > 0 && this._rows > 1;
     this.wrapCls = {
@@ -223,6 +226,7 @@ export class TextareaItem implements OnInit, AfterContentChecked {
     this._value = e;
     this.textRef.nativeElement.value = this._value;
     this.setCharacterLength();
+    this._onChange(this._value);
     this.onChange.emit(this._value);
   }
 
@@ -270,6 +274,18 @@ export class TextareaItem implements OnInit, AfterContentChecked {
     return text.replace(regexAstralSymbols, '_').length;
   }
 
+
+  writeValue(value: any): void {
+    if (value) {
+      this._value = value;
+    }
+  }
+  registerOnChange(fn: (_: any) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {}
+
   ngOnInit() {
     this.setCls();
     this.setCharacterLength();