feat(value-accessors): set ionic classes

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 {

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));
     };
   }
 

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 {

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) {

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) {

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'); }
+  });
+}