diff --git a/src/components/input/nz-input.component.ts b/src/components/input/nz-input.component.ts index 09e192741fb..6334ca87d68 100644 --- 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 = new EventEmitter(); @Output() nzFocus: EventEmitter = new EventEmitter(); @ContentChild('addOnBefore') _addOnContentBefore: TemplateRef; diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts index 724d870d110..3c226d42e95 100644 --- 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 index c796a56b0eb..956bc0d9b8d 100644 --- a/src/showcase/nz-demo-input/nz-demo-input.html +++ b/src/showcase/nz-demo-input/nz-demo-input.html @@ -102,6 +102,12 @@

nz-input bool false + + nzReadonly + 是否只读状态,默认为 false + bool + false + nzBlur 失去焦点回调