feat(demo): make our value accessors more closely match Angular's

packages/angular/demo/e2e/inputs.e2e-spec.ts

@@ -15,8 +15,8 @@ describe('Demo Inputs Page', () => {
   describe('input one', () => {
     it('should display the starting text', () => {
       page.navigateTo();
-      const el = page.getInputOne();
+      const el = page.getIonicTextInput();
-      expect(el.getAttribute('value')).toEqual('This is data for test input one');
+      expect(el.getAttribute('value')).toEqual('This is the Ionic Text Input');
     });
   });
 });

packages/angular/demo/e2e/inputs.po.ts

@@ -9,11 +9,11 @@ export class InputsPage {
     return element(by.css('.title')).getText();
   }
 
-  getInputOne() {
+  getIonicTextInput() {
-    return element(by.id('inputOne'));
+    return element(by.id('ionTextInput'));
   }
 
-  getOutputOneText() {
+  getIonicTextInputOutputText() {
-    return element(by.id('outputOne')).getText();
+    return element(by.id('ionTextInputOutput')).getText();
   }
 }

packages/angular/demo/src/app/inputs/inputs-test-page.component.html

@@ -5,18 +5,34 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <ion-input id="inputOne" name="inputOne" [(ngModel)]="testInputOne"></ion-input>
+      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="stdTextInput" (change)="change($event)" (blur)="onBlur($event)" />
     </ion-col>
     <ion-col>
-      Entered Data: <span id="outputOne">{{testInputOne}}</span>
+      Entered Data: <span id="stdTextInputOutput">{{stdTextInput}}</span>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
-      <ion-checkbox id="checkboxOne" name="checkboxOne" [(ngModel)]="testCheckboxOne"></ion-checkbox>
+      <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput" (change)="change($event)" (blur)="onBlur($event)"></ion-input>
     </ion-col>
     <ion-col>
-      Entered Data: <span id="outputCheckboxOne">{{testCheckboxOne}}</span>
+      Entered Data: <span id="ionTextInputOutput">{{ionTextInput}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="stdCheckbox" (change)="change($event)" (blur)="onBlur($event)"/>
+    </ion-col>
+    <ion-col>
+      Entered Data: <span id="stdCheckboxOutput">{{stdCheckbox}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="ionCheckbox" (change)="change($event)" (blur)="onBlur($event)"></ion-checkbox>
+    </ion-col>
+    <ion-col>
+      Entered Data: <span id="ionCheckboxOutput">{{ionCheckbox}}</span>
     </ion-col>
   </ion-row>
 </ion-grid>

packages/angular/demo/src/app/inputs/inputs-test-page.component.spec.ts

@@ -1,7 +1,9 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
+import { SharedModule } from '../shared/shared.module';
 import { InputsTestPageComponent } from './inputs-test-page.component';
 
 describe('InputsTestPageComponent', () => {
@@ -12,6 +14,7 @@ describe('InputsTestPageComponent', () => {
     async(() => {
       TestBed.configureTestingModule({
         declarations: [InputsTestPageComponent],
+        imports: [FormsModule, SharedModule],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
       }).compileComponents();
     })

packages/angular/demo/src/app/inputs/inputs-test-page.component.ts

@@ -7,10 +7,21 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class InputsTestPageComponent implements OnInit {
-  testCheckboxOne = true;
+  ionTextInput = 'This is the Ionic Text Input';
-  testInputOne = 'This is data for test input one';
+  stdTextInput = 'This is the HTML Text Input';
+
+  ionCheckbox = true;
+  stdCheckbox = true;
 
   constructor() {}
 
   ngOnInit() {}
+
+  onBlur(evt) {
+    console.log('blur: ', evt);
+  }
+
+  change(evt) {
+    console.log('change: ', evt);
+  }
 }

packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts

@@ -16,13 +16,11 @@ export class IonCheckboxValueAccessorDirective implements ControlValueAccessor {
   onTouched: () => void;
 
   writeValue(value: any) {
-    console.log('writeValue', value);
     this.renderer.setProperty(this.element.nativeElement, 'checked', value);
   }
 
   @HostListener('change', ['$event.target.checked'])
   _handleIonChange(value: any) {
-    console.log('handle change', value);
     this.onChange(value);
   }
 

packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts

@@ -2,6 +2,8 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 // NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
+// May also need to look at this to see if we need anything else:
+// https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
 @Directive({
   selector: 'ion-input',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonInputValueAccessorDirective, multi: true }]
@@ -24,6 +26,11 @@ export class IonInputValueAccessorDirective implements ControlValueAccessor {
     this.onChange(value);
   }
 
+  @HostListener('blur')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
   registerOnChange(fn: (value: any) => void) {
     this.onChange = fn;
   }