diff --git a/packages/angular/demo/e2e/inputs.e2e-spec.ts b/packages/angular/demo/e2e/inputs.e2e-spec.ts index 598e7720f1..8c875c6920 100644 --- a/packages/angular/demo/e2e/inputs.e2e-spec.ts +++ b/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(); - expect(el.getAttribute('value')).toEqual('This is data for test input one'); + const el = page.getIonicTextInput(); + expect(el.getAttribute('value')).toEqual('This is the Ionic Text Input'); }); }); }); diff --git a/packages/angular/demo/e2e/inputs.po.ts b/packages/angular/demo/e2e/inputs.po.ts index c6dd99574e..1643f3ad37 100644 --- a/packages/angular/demo/e2e/inputs.po.ts +++ b/packages/angular/demo/e2e/inputs.po.ts @@ -9,11 +9,11 @@ export class InputsPage { return element(by.css('.title')).getText(); } - getInputOne() { - return element(by.id('inputOne')); + getIonicTextInput() { + return element(by.id('ionTextInput')); } - getOutputOneText() { - return element(by.id('outputOne')).getText(); + getIonicTextInputOutputText() { + return element(by.id('ionTextInputOutput')).getText(); } } 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 90bcbaae4e..bed1bc2f7a 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,18 +5,34 @@ - + - Entered Data: {{testInputOne}} + Entered Data: {{stdTextInput}} - + - Entered Data: {{testCheckboxOne}} + Entered Data: {{ionTextInput}} + + + + + + + + Entered Data: {{stdCheckbox}} + + + + + + + + Entered Data: {{ionCheckbox}} 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 cf9fe3b218..7088b92f8d 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,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(); }) 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 f7bdc749e4..68e3b8d115 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 @@ -7,10 +7,21 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; encapsulation: ViewEncapsulation.None }) export class InputsTestPageComponent implements OnInit { - testCheckboxOne = true; - testInputOne = 'This is data for test input one'; + ionTextInput = 'This is the Ionic Text Input'; + 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); + } } diff --git a/packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts index 950b453ba5..2f36be791e 100644 --- a/packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts +++ b/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); } 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 index 945f0c4a26..6cac97d830 100644 --- 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 @@ -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; }