feat(module:input): support nzReadonly property (#236)

NG-ZORRO · Sep 6, 2017 · 6b69cf9 · 6b69cf9
1 parent 1796106
commit 6b69cf9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/src/components/input/nz-input.component.ts b/src/components/input/nz-input.component.ts
@@ -31,6 +31,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
         (focus)="_emitFocus($event)"
         [attr.id]="nzId"
         [disabled]="nzDisabled"
+        [readonly]="nzReadonly"
         [attr.type]="nzType"
         class="ant-input"
         [class.ant-input-search]="nzType==='search'"
@@ -45,6 +46,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
         [attr.id]="nzId"
         #inputTextarea
         [disabled]="nzDisabled"
+        [readonly]="nzReadonly"
         type="textarea"
         [attr.rows]="nzRows"
         [attr.cols]="nzCols"
@@ -83,6 +85,7 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
   _composing = false;
   _classMap;
   _disabled = false;
+  _readonly = false;
 
   // ngModel Access
   onChange: any = Function.prototype;
@@ -114,6 +117,15 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
     this.setClassMap();
   }
 
+  @Input()
+  get nzReadonly(): boolean {
+    return this._readonly;
+  };
+
+  set nzReadonly(value: boolean) {
+    this._readonly = value;
+  }
+
   @Output() nzBlur: EventEmitter<MouseEvent> = new EventEmitter();
   @Output() nzFocus: EventEmitter<MouseEvent> = new EventEmitter();
   @ContentChild('addOnBefore') _addOnContentBefore: TemplateRef<any>;

diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts
@@ -18,6 +18,7 @@ import {
 export class NzInputDirectiveComponent {
   size = 'default';
   nativeElement: HTMLElement;
+  _readonly = false;
   @HostBinding(`class.ant-input-disabled`) _disabled = false;
 
   @Input()
@@ -43,6 +44,20 @@ export class NzInputDirectiveComponent {
     this._disabled = value;
   }
 
+  @Input()
+  get nzReadonly(): boolean {
+    return this._readonly;
+  };
+
+  set nzReadonly(value: boolean) {
+    if (value) {
+      this._render.setAttribute(this.nativeElement, 'readonly', '');
+    } else {
+      this._render.removeAttribute(this.nativeElement, 'readonly');
+    }
+    this._readonly = value;
+  }
+
   @HostBinding(`class.ant-input`) _nzInput = true;
 
 

diff --git a/src/showcase/nz-demo-input/nz-demo-input.html b/src/showcase/nz-demo-input/nz-demo-input.html
@@ -102,6 +102,12 @@ <h3 id="Input"><span>nz-input</span>
           <td>bool</td>
           <td>false</td>
         </tr>
+        <tr>
+          <td>nzReadonly</td>
+          <td>是否只读状态，默认为 false</td>
+          <td>bool</td>
+          <td>false</td>
+        </tr>
         <tr>
           <td>nzBlur</td>
           <td>失去焦点回调</td>