diff --git a/packages/angular/src/control-value-accessors/boolean-value-accessor.ts b/packages/angular/src/control-value-accessors/boolean-value-accessor.ts index 63e0340aaf..8e91429fb4 100644 --- a/packages/angular/src/control-value-accessors/boolean-value-accessor.ts +++ b/packages/angular/src/control-value-accessors/boolean-value-accessor.ts @@ -1,8 +1,7 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; -import { - ControlValueAccessor, - NG_VALUE_ACCESSOR -} from '@angular/forms'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +import { setIonicClasses } from './util/set-ionic-classes'; @Directive({ /* tslint:disable-next-line:directive-selector */ @@ -17,8 +16,8 @@ import { }) export class BooleanValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { - this.onChange = () => {}; - this.onTouched = () => {}; + this.onChange = () => { }; + this.onTouched = () => { }; } onChange: (value: any) => void; @@ -26,16 +25,23 @@ export class BooleanValueAccessor implements ControlValueAccessor { writeValue(value: any) { this.renderer.setProperty(this.element.nativeElement, 'checked', value); + setIonicClasses(this.element); } @HostListener('ionChange', ['$event.target.checked']) _handleIonChange(value: any) { this.onChange(value); + setTimeout(() => { + setIonicClasses(this.element); + }); } @HostListener('ionBlur') _handleBlurEvent() { this.onTouched(); + setTimeout(() => { + setIonicClasses(this.element); + }); } registerOnChange(fn: (value: any) => void): void { diff --git a/packages/angular/src/control-value-accessors/numeric-value-accesssor.ts b/packages/angular/src/control-value-accessors/numeric-value-accesssor.ts index 9fd4a4ac89..f6eaf6c36e 100644 --- a/packages/angular/src/control-value-accessors/numeric-value-accesssor.ts +++ b/packages/angular/src/control-value-accessors/numeric-value-accesssor.ts @@ -1,6 +1,8 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { setIonicClasses } from './util/set-ionic-classes'; + @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-input[type=number]', @@ -14,8 +16,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; }) export class NumericValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { - this.onChange = () => {}; - this.onTouched = () => {}; + this.onChange = () => { }; + this.onTouched = () => { }; } onChange: (value: any) => void; @@ -30,21 +32,28 @@ export class NumericValueAccessor implements ControlValueAccessor { 'value', normalizedValue ); + setIonicClasses(this.element); } @HostListener('input', ['$event.target.value']) _handleInputEvent(value: any): void { this.onChange(value); + setTimeout(() => { + setIonicClasses(this.element); + }); } @HostListener('ionBlur') _handleBlurEvent(): void { this.onTouched(); + setTimeout(() => { + setIonicClasses(this.element); + }); } registerOnChange(fn: (_: number | null) => void): void { this.onChange = value => { - fn(value == '' ? null : parseFloat(value)); + fn(value === '' ? null : parseFloat(value)); }; } diff --git a/packages/angular/src/control-value-accessors/radio-value-accessor.ts b/packages/angular/src/control-value-accessors/radio-value-accessor.ts index 3bea1d38a1..9dbb774668 100644 --- a/packages/angular/src/control-value-accessors/radio-value-accessor.ts +++ b/packages/angular/src/control-value-accessors/radio-value-accessor.ts @@ -1,14 +1,7 @@ -import { - Directive, - ElementRef, - HostListener, - Input, - Renderer2 -} from '@angular/core'; -import { - ControlValueAccessor, - NG_VALUE_ACCESSOR -} from '@angular/forms'; +import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +import { setIonicClasses } from './util/set-ionic-classes'; @Directive({ /* tslint:disable-next-line:directive-selector */ @@ -28,8 +21,8 @@ export class RadioValueAccessor implements ControlValueAccessor { onTouched: () => void; constructor(private element: ElementRef, private renderer: Renderer2) { - this.onChange = () => {}; - this.onTouched = () => {}; + this.onChange = () => { }; + this.onTouched = () => { }; } writeValue(value: any) { @@ -38,16 +31,23 @@ export class RadioValueAccessor implements ControlValueAccessor { 'checked', value === this.value ); + setIonicClasses(this.element); } @HostListener('ionSelect', ['$event.target.checked']) _handleIonSelect(value: any) { this.onChange(value); + setTimeout(() => { + setIonicClasses(this.element); + }); } @HostListener('ionBlur') _handleBlurEvent() { this.onTouched(); + setTimeout(() => { + setIonicClasses(this.element); + }); } registerOnChange(fn: (value: any) => void): void { diff --git a/packages/angular/src/control-value-accessors/select-value-accessor.ts b/packages/angular/src/control-value-accessors/select-value-accessor.ts index 274992dacf..5b76a027d3 100644 --- a/packages/angular/src/control-value-accessors/select-value-accessor.ts +++ b/packages/angular/src/control-value-accessors/select-value-accessor.ts @@ -1,6 +1,8 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { setIonicClasses } from './util/set-ionic-classes'; + // NOTE: May need to look at this to see if we need anything else: // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158 @Directive({ @@ -16,8 +18,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; }) export class SelectValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { - this.onChange = () => {}; - this.onTouched = () => {}; + this.onChange = () => { }; + this.onTouched = () => { }; } onChange: (value: any) => void; @@ -25,16 +27,23 @@ export class SelectValueAccessor implements ControlValueAccessor { writeValue(value: any) { this.renderer.setProperty(this.element.nativeElement, 'value', value); + setIonicClasses(this.element); } @HostListener('ionChange', ['$event.target.value']) _handleChangeEvent(value: any) { this.onChange(value); + setTimeout(() => { + setIonicClasses(this.element); + }); } @HostListener('ionBlur') _handleBlurEvent() { this.onTouched(); + setTimeout(() => { + setIonicClasses(this.element); + }); } registerOnChange(fn: (value: any) => void) { diff --git a/packages/angular/src/control-value-accessors/text-value-accessor.ts b/packages/angular/src/control-value-accessors/text-value-accessor.ts index b8479f8245..daf777b3cd 100644 --- a/packages/angular/src/control-value-accessors/text-value-accessor.ts +++ b/packages/angular/src/control-value-accessors/text-value-accessor.ts @@ -1,6 +1,8 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { setIonicClasses } from './util/set-ionic-classes'; + @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar', @@ -14,8 +16,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; }) export class TextValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { - this.onChange = () => {}; - this.onTouched = () => {}; + this.onChange = () => { }; + this.onTouched = () => { }; } onChange: (value: any) => void; @@ -23,16 +25,23 @@ export class TextValueAccessor implements ControlValueAccessor { writeValue(value: any) { this.renderer.setProperty(this.element.nativeElement, 'value', value); + setIonicClasses(this.element); } @HostListener('input', ['$event.target.value']) _handleInputEvent(value: any) { this.onChange(value); + setTimeout(() => { + setIonicClasses(this.element); + }); } @HostListener('ionBlur') _handleBlurEvent() { this.onTouched(); + setTimeout(() => { + setIonicClasses(this.element); + }); } registerOnChange(fn: (value: any) => void) { diff --git a/packages/angular/src/control-value-accessors/util/set-ionic-classes.ts b/packages/angular/src/control-value-accessors/util/set-ionic-classes.ts new file mode 100644 index 0000000000..23511099cd --- /dev/null +++ b/packages/angular/src/control-value-accessors/util/set-ionic-classes.ts @@ -0,0 +1,20 @@ +import { ElementRef } from '@angular/core'; + +export function setIonicClasses(element: ElementRef) { + const classList = element.nativeElement.classList; + + classList.remove('ion-invalid'); + classList.remove('ion-valid'); + classList.remove('ion-touched'); + classList.remove('ion-untouched'); + classList.remove('ion-dirty'); + classList.remove('ion-pristine'); + classList.forEach((cls: string) => { + if (cls === 'ng-invalid') { classList.add('ion-invalid'); } + if (cls === 'ng-valid') { classList.add('ion-valid'); } + if (cls === 'ng-touched') { classList.add('ion-touched'); } + if (cls === 'ng-untouched') { classList.add('ion-untouched'); } + if (cls === 'ng-dirty') { classList.add('ion-dirty'); } + if (cls === 'ng-pristine') { classList.add('ion-pristine'); } + }); +}