diff --git a/src/components/input/nz-input.component.ts b/src/components/input/nz-input.component.ts
index 21cb21b4273..4c839905a5e 100644
--- 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: `
@@ -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">
@@ -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">
@@ -61,14 +62,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
`,
- 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 = new EventEmitter();
@Output() nzFocus: EventEmitter = new EventEmitter();
@ContentChild('addOnBefore') _addOnContentBefore: TemplateRef;
@@ -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
index 4bf5e44f440..78a8e0d84d3 100644
--- 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;