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;