diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts index 1c19f2b8a3..07763786b5 100644 --- a/src/components/input/input-base.ts +++ b/src/components/input/input-base.ts @@ -99,25 +99,36 @@ export class InputBase { } }; - this.setItemControlCss(); + this.setItemInputControlCss(); } ngAfterContentChecked() { - this.setItemControlCss(); + this.setItemInputControlCss(); } - private setItemControlCss() { + private setItemInputControlCss() { let item = this._item; + let nativeInput = this._native; let inputControl = this.inputControl; + // Set the control classes on the item if (item && inputControl) { - item.setCssClass('ng-untouched', inputControl.untouched); - item.setCssClass('ng-touched', inputControl.touched); - item.setCssClass('ng-pristine', inputControl.pristine); - item.setCssClass('ng-dirty', inputControl.dirty); - item.setCssClass('ng-valid', inputControl.valid); - item.setCssClass('ng-invalid', !inputControl.valid); + this.setControlCss(item, inputControl); } + + // Set the control classes on the native input + if (nativeInput && inputControl) { + this.setControlCss(nativeInput, inputControl); + } + } + + private setControlCss(element, control) { + element.setCssClass('ng-untouched', control.untouched); + element.setCssClass('ng-touched', control.touched); + element.setCssClass('ng-pristine', control.pristine); + element.setCssClass('ng-dirty', control.dirty); + element.setCssClass('ng-valid', control.valid); + element.setCssClass('ng-invalid', !control.valid); } ngOnDestroy() { diff --git a/src/components/input/native-input.ts b/src/components/input/native-input.ts index 1a2924a6a5..2f2ce77051 100644 --- a/src/components/input/native-input.ts +++ b/src/components/input/native-input.ts @@ -164,6 +164,10 @@ export class NativeInput { return this.element().value; } + setCssClass(cssClass: string, shouldAdd: boolean) { + this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd); + } + element(): HTMLInputElement { return this._elementRef.nativeElement; }