From 20c25df2804d6dd3908f2f9e35215522d31f3358 Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Wed, 15 Nov 2017 12:30:16 -0600
Subject: [PATCH] feat(demo): add a sample value accessor so we don't have to
 use ngDefaultControl

---
 .../inputs/inputs-test-page.component.html    |  2 +-
 .../inputs/inputs-test-page.component.spec.ts | 20 +++++++++++-
 .../app/inputs/inputs-test-page.component.ts  |  4 +++
 .../demo/src/app/inputs/inputs.module.ts      |  3 +-
 .../ion-input-value-accessor.directive.ts     | 32 +++++++++++++++++++
 .../demo/src/app/shared/shared.module.ts      |  9 ++++++
 6 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts
 create mode 100644 packages/angular/demo/src/app/shared/shared.module.ts

diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html
index 61a8d2bd4c..b429d334ce 100644
--- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html
+++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html
@@ -5,7 +5,7 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <ion-input id="inputOne" [(ngModel)]="testInputOne" ngDefaultControl></ion-input>
+      <ion-input id="inputOne" name="inputOne" [(ngModel)]="testInputOne"></ion-input>
     </ion-col>
     <ion-col>
       Entered Data: <span id="outputOne">{{testInputOne}}</span>
diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.spec.ts b/packages/angular/demo/src/app/inputs/inputs-test-page.component.spec.ts
index 5b537c6069..f4a1771f18 100644
--- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.spec.ts
+++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.spec.ts
@@ -1,5 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { InputsTestPageComponent } from './inputs-test-page.component';
 
@@ -25,4 +26,21 @@ describe('InputsTestPageComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('testInputOne', () => {
+    let input;
+    beforeEach(
+      fakeAsync(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        tick();
+        const ionInput = fixture.debugElement.query(By.css('#inputOne'));
+        input = ionInput.query(By.css('input')).nativeElement;
+      })
+    );
+
+    it('should reflect changes to the input', () => {
+      expect(input).toBeTruthy();
+    });
+  });
 });
diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts
index b664a78afc..05e81cd69c 100644
--- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts
+++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts
@@ -12,4 +12,8 @@ export class InputsTestPageComponent implements OnInit {
   constructor() {}
 
   ngOnInit() {}
+
+  changed(evt) {
+    console.log(evt);
+  }
 }
diff --git a/packages/angular/demo/src/app/inputs/inputs.module.ts b/packages/angular/demo/src/app/inputs/inputs.module.ts
index f754a9327a..bafb1b94f7 100644
--- a/packages/angular/demo/src/app/inputs/inputs.module.ts
+++ b/packages/angular/demo/src/app/inputs/inputs.module.ts
@@ -3,10 +3,11 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { InputsTestPageComponent } from './inputs-test-page.component';
 
+import { SharedModule } from '../shared/shared.module';
 import { InputsRoutingModule } from './inputs-routing.module';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, InputsRoutingModule],
+  imports: [CommonModule, FormsModule, InputsRoutingModule, SharedModule],
   declarations: [InputsTestPageComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts
new file mode 100644
index 0000000000..8fcda4aadd
--- /dev/null
+++ b/packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts
@@ -0,0 +1,32 @@
+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
+@Directive({
+  selector: 'ion-input',
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonInputValueAccessorDirective, multi: true }]
+})
+export class IonInputValueAccessorDirective implements ControlValueAccessor  {
+  constructor(private element: ElementRef, private renderer: Renderer2) {
+    this.onChange = () => {};
+  }
+
+  onChange: (value: string) => void;
+
+  writeValue(value: string) {
+    this.renderer.setProperty(this.element.nativeElement, 'value', value);
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  _handleIllyChange(value: string) {
+    this.onChange(value);
+  }
+
+  registerOnChange(fn: (value: string) => void) {
+    this.onChange = value => {
+      fn(value);
+    };
+  }
+
+  registerOnTouched() {}
+}
diff --git a/packages/angular/demo/src/app/shared/shared.module.ts b/packages/angular/demo/src/app/shared/shared.module.ts
new file mode 100644
index 0000000000..c266503146
--- /dev/null
+++ b/packages/angular/demo/src/app/shared/shared.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { IonInputValueAccessorDirective } from './ion-input-value-accessor.directive';
+
+@NgModule({
+  exports: [IonInputValueAccessorDirective],
+  declarations: [IonInputValueAccessorDirective]
+})
+export class SharedModule { }