javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(demo): make custom value accessors generic

Browse Source
This commit is contained in:
Ken Sodemann
2017-11-16 11:21:12 -06:00
parent fbf7bc675f
commit 90b6e01a38
5 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,36 +3,72 @@
</div>
<ion-grid>
<ion-row>
<ion-col>
<h2>Text Inputs</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdTextInput">Standard Input</label>
<input id="stdTextInput" name="stdTextInput" [(ngModel)]="stdTextInput" />
</ion-col>
<ion-col>
Entered Data: <span id="stdTextInputOutput">{{stdTextInput}}</span>
Standard Text Input:
<span id="stdTextInputOutput">{{stdTextInput}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput"></ion-input>
<ion-item>
<ion-label>Ionic Text Input</ion-label>
<ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput"></ion-input>
</ion-item>
</ion-col>
<ion-col>
Entered Data: <span id="ionTextInputOutput">{{ionTextInput}}</span>
Ionic Text Input:
<span id="ionTextInputOutput">{{ionTextInput}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Boolean Inputs</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="stdCheckbox" (blur)="onBlur($event)"/>
<label for="stdCheckbox">Standard Checkbox</label>
<input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="stdCheckbox" (blur)="onBlur($event)" />
</ion-col>
<ion-col>
Entered Data: <span id="stdCheckboxOutput">{{stdCheckbox}}</span>
Standard Checkbox:
<span id="stdCheckboxOutput">{{stdCheckbox}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="ionCheckbox" (ionBlur)="onBlur($event)"></ion-checkbox>
<ion-item>
<ion-label>Ionic Checkbox</ion-label>
<ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="ionCheckbox" (ionBlur)="onBlur($event)"></ion-checkbox>
</ion-item>
</ion-col>
<ion-col>
Entered Data: <span id="ionCheckboxOutput">{{ionCheckbox}}</span>
Ionic Checkbox:
<span id="ionCheckboxOutput">{{ionCheckbox}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Toggle</ion-label>
<ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="ionToggle" (ionBlur)="onBlur($event)"></ion-toggle>
</ion-item>
</ion-col>
<ion-col>
Ionic Toggle:
<span id="ionCheckboxOutput">{{ionToggle}}</span>
</ion-col>
</ion-row>
</ion-grid>

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

@ -13,6 +13,8 @@ export class InputsTestPageComponent implements OnInit {
ionCheckbox = true;
stdCheckbox = true;
ionToggle = false;
constructor() {}
ngOnInit() {}

6
packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts → packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts
View File

@ -3,10 +3,10 @@ import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
@Directive({
selector: 'ion-checkbox',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonCheckboxValueAccessorDirective, multi: true }]
selector: 'ion-checkbox,ion-toggle',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
})
export class IonCheckboxValueAccessorDirective implements ControlValueAccessor {
export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {};
this.onTouched = () => {};

6
packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts → packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts
View File

@ -1,14 +1,14 @@
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ControlValueAccessor, 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 }]
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
})
export class IonInputValueAccessorDirective implements ControlValueAccessor {
export class IonTextValueAccessorDirective implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {};
this.onTouched = () => {};

8
packages/angular/demo/src/app/shared/shared.module.ts
View File

@ -1,10 +1,10 @@
import { NgModule } from '@angular/core';
import { IonCheckboxValueAccessorDirective } from './ion-checkbox-value-accessor.directive';
import { IonInputValueAccessorDirective } from './ion-input-value-accessor.directive';
import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
@NgModule({
exports: [IonCheckboxValueAccessorDirective, IonInputValueAccessorDirective],
declarations: [IonCheckboxValueAccessorDirective, IonInputValueAccessorDirective]
exports: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective],
declarations: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective]
})
export class SharedModule { }