mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
feat(value-accessors): move the value accessors into @ionic/angular
This commit is contained in:
Ken Sodemann
@ -1,13 +1,18 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BasicInputsPageComponent } from './basic-inputs-page.component';
|
||||
import { IonicAngularModule } from '@ionic/angular';
|
||||
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
import { BasicInputsPageComponent } from './basic-inputs-page.component';
|
||||
import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, FormsModule, BasicInputsPageRoutingModule, SharedModule],
|
||||
imports: [
|
||||
BasicInputsPageRoutingModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicAngularModule
|
||||
],
|
||||
declarations: [BasicInputsPageComponent],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { IonicAngularModule } from '@ionic/angular';
|
||||
|
||||
import { GroupInputsPageComponent } from './group-inputs-page.component';
|
||||
import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
GroupInputsPageRoutingModule,
|
||||
SharedModule
|
||||
IonicAngularModule
|
||||
],
|
||||
declarations: [GroupInputsPageComponent],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
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({
|
||||
/* tslint:disable-next-line:directive-selector */
|
||||
selector: 'ion-checkbox,ion-toggle',
|
||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
|
||||
})
|
||||
export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
|
||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||
this.onChange = () => {};
|
||||
this.onTouched = () => {};
|
||||
}
|
||||
|
||||
onChange: (value: any) => void;
|
||||
onTouched: () => void;
|
||||
|
||||
writeValue(value: any) {
|
||||
this.renderer.setProperty(this.element.nativeElement, 'checked', value);
|
||||
}
|
||||
|
||||
@HostListener('ionChange', ['$event.target.checked'])
|
||||
_handleIonChange(value: any) {
|
||||
this.onChange(value);
|
||||
}
|
||||
|
||||
@HostListener('ionBlur')
|
||||
_handleBlurEvent() {
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
registerOnChange(fn: (value: any) => void): void {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled);
|
||||
}
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
import {
|
||||
Directive,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
Input,
|
||||
Renderer2
|
||||
} from '@angular/core';
|
||||
import {
|
||||
ControlValueAccessor,
|
||||
DefaultValueAccessor,
|
||||
NgControl,
|
||||
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({
|
||||
/* tslint:disable-next-line:directive-selector */
|
||||
selector: 'ion-radio',
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: IonRadioValueAccessorDirective,
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class IonRadioValueAccessorDirective implements ControlValueAccessor {
|
||||
@Input() value: any;
|
||||
@Input() name: string;
|
||||
|
||||
onChange: (value: any) => void;
|
||||
onTouched: () => void;
|
||||
|
||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||
this.onChange = () => {};
|
||||
this.onTouched = () => {};
|
||||
}
|
||||
|
||||
writeValue(value: any) {
|
||||
this.renderer.setProperty(
|
||||
this.element.nativeElement,
|
||||
'checked',
|
||||
value === this.value
|
||||
);
|
||||
}
|
||||
|
||||
@HostListener('ionSelect', ['$event.target.checked'])
|
||||
_handleIonSelect(value: any) {
|
||||
this.onChange(value);
|
||||
}
|
||||
|
||||
@HostListener('ionBlur')
|
||||
_handleBlurEvent() {
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
registerOnChange(fn: (value: any) => void): void {
|
||||
this.onChange = () => {
|
||||
fn(this.value);
|
||||
};
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.renderer.setProperty(
|
||||
this.element.nativeElement,
|
||||
'disabled',
|
||||
isDisabled
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
||||
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.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
|
||||
@Directive({
|
||||
/* tslint:disable-next-line:directive-selector */
|
||||
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
|
||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
|
||||
})
|
||||
export class IonSelectValueAccessorDirective implements ControlValueAccessor {
|
||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||
this.onChange = () => {};
|
||||
this.onTouched = () => {};
|
||||
}
|
||||
|
||||
onChange: (value: any) => void;
|
||||
onTouched: () => void;
|
||||
|
||||
writeValue(value: any) {
|
||||
this.renderer.setProperty(this.element.nativeElement, 'value', value);
|
||||
}
|
||||
|
||||
@HostListener('ionChange', ['$event.target.value'])
|
||||
_handleChangeEvent(value: any) {
|
||||
this.onChange(value);
|
||||
}
|
||||
|
||||
@HostListener('ionBlur')
|
||||
_handleBlurEvent() {
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
registerOnChange(fn: (value: any) => void) {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void) {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
||||
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({
|
||||
/* tslint:disable-next-line:directive-selector */
|
||||
selector: 'ion-input,ion-textarea',
|
||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
|
||||
})
|
||||
export class IonTextValueAccessorDirective implements ControlValueAccessor {
|
||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||
this.onChange = () => {};
|
||||
this.onTouched = () => {};
|
||||
}
|
||||
|
||||
onChange: (value: any) => void;
|
||||
onTouched: () => void;
|
||||
|
||||
writeValue(value: any) {
|
||||
this.renderer.setProperty(this.element.nativeElement, 'value', value);
|
||||
}
|
||||
|
||||
@HostListener('input', ['$event.target.value'])
|
||||
_handleInputEvent(value: any) {
|
||||
this.onChange(value);
|
||||
}
|
||||
|
||||
@HostListener('ionBlur')
|
||||
_handleBlurEvent() {
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
registerOnChange(fn: (value: any) => void) {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void) {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
|
||||
import { IonRadioValueAccessorDirective } from './ion-radio-value-accessor/ion-radio-value-accessor.directive';
|
||||
import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive';
|
||||
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
|
||||
|
||||
@NgModule({
|
||||
exports: [
|
||||
IonBooleanValueAccessorDirective,
|
||||
IonRadioValueAccessorDirective,
|
||||
IonSelectValueAccessorDirective,
|
||||
IonTextValueAccessorDirective
|
||||
],
|
||||
declarations: [
|
||||
IonBooleanValueAccessorDirective,
|
||||
IonRadioValueAccessorDirective,
|
||||
IonSelectValueAccessorDirective,
|
||||
IonTextValueAccessorDirective
|
||||
]
|
||||
})
|
||||
export class SharedModule {}
|
||||
Reference in New Issue
Block a user