fix(module:input): fix input disabled style bug

input component and directive close #103
NG-ZORRO · Aug 21, 2017 · 5082955 · 5082955
1 parent 15f6aad
commit 5082955
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 9 deletions.
diff --git a/src/components/input/nz-input.component.ts b/src/components/input/nz-input.component.ts
@@ -9,14 +9,14 @@ import {
   EventEmitter,
   ContentChild,
   forwardRef,
-  AfterContentInit, HostListener
+  AfterContentInit, HostListener, HostBinding
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
-  selector     : 'nz-input',
+  selector: 'nz-input',
   encapsulation: ViewEncapsulation.None,
-  template     : `
+  template: `
     <span class="ant-input-group-addon" *ngIf="_addOnContentBefore">
       <ng-template [ngTemplateOutlet]="_addOnContentBefore">
       </ng-template>
@@ -34,7 +34,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
         [attr.type]="nzType"
         class="ant-input"
         [class.ant-input-search]="nzType==='search'"
-        [ngClass]="_prefixCls+'-'+_size"
+        [ngClass]="_classMap"
         [attr.placeholder]="nzPlaceHolder"
         [(ngModel)]="nzValue">
     </ng-template>
@@ -49,6 +49,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
         [attr.rows]="nzRows"
         [attr.cols]="nzCols"
         class="ant-input"
+        [ngClass]="_classMap"
         [attr.placeholder]="nzPlaceHolder"
         [(ngModel)]="nzValue"></textarea>
     </ng-template>
@@ -61,14 +62,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       <ng-template [ngTemplateOutlet]="_addOnContentAfter">
       </ng-template>
     </span>`,
-  providers    : [
+  providers: [
     {
-      provide    : NG_VALUE_ACCESSOR,
+      provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NzInputComponent),
-      multi      : true
+      multi: true
     }
   ],
-  styleUrls    : [
+  styleUrls: [
     './style/index.less',
     './style/patch.less'
   ]
@@ -80,6 +81,8 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
   _size = 'default';
   _prefixCls = 'ant-input';
   _composing = false;
+  _classMap;
+  _disabled = false;
 
   // ngModel Access
   onChange: any = Function.prototype;
@@ -90,7 +93,6 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
   @Input() nzId: string;
   @Input() nzRows: number;
   @Input() nzCols: number;
-  @Input() nzDisabled: boolean;
 
   @Input()
   get nzSize(): string {
@@ -101,6 +103,16 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
     this._size = { large: 'lg', small: 'sm' }[ value ];
   }
 
+  @Input()
+  get nzDisabled(): boolean {
+    return this._disabled;
+  };
+
+  set nzDisabled(value: boolean) {
+    this._disabled = value;
+    this.setClassMap();
+  }
+
   @Output() nzBlur: EventEmitter<MouseEvent> = new EventEmitter();
   @Output() nzFocus: EventEmitter<MouseEvent> = new EventEmitter();
   @ContentChild('addOnBefore') _addOnContentBefore: TemplateRef<any>;
@@ -143,6 +155,13 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor
     this.nzFocus.emit($event);
   }
 
+  setClassMap(): void {
+    this._classMap = {
+      [this._prefixCls+'-'+this._size]: true,
+      [`${this._prefixCls}-disabled`]: this._disabled
+    };
+  }
+
   constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
     this._el = this._elementRef.nativeElement;
   }

diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts
@@ -17,6 +17,7 @@ import {
 })
 export class NzInputDirectiveComponent {
   size = 'default';
+  _disabled = false;
   nativeElement: HTMLElement;
 
   @Input()
@@ -28,6 +29,23 @@ export class NzInputDirectiveComponent {
     this.size = { large: 'lg', small: 'sm' }[ value ];
   }
 
+  @Input()
+  get nzDisabled(): boolean {
+    return this._disabled;
+  };
+
+  set nzDisabled(value: boolean) {
+    if(value){
+       this.nativeElement.setAttribute('disabled','');
+    }
+    this._disabled = value;
+  }
+
+  @HostBinding(`class.ant-input-disabled`)
+  get setDisabledClass(): boolean {
+    return this._disabled === true;
+  };
+
   @HostBinding(`class.ant-input`) _nzInput = true;