mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
feat(value-accessors): move the value accessors into @ionic/angular
This commit is contained in:
66
packages/angular/demo/package-lock.json
generated
66
packages/angular/demo/package-lock.json
generated
@ -38,9 +38,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/animations": {
|
"@angular/animations": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-LtBb+g7SLW0VUGWHhellwfv+xac=",
|
"integrity": "sha1-e0EflmDc8aKn0d1qDWA76+8oC+I=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
@ -172,25 +172,25 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/common": {
|
"@angular/common": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-AnsWuNL2PrFNn7yEoKXdkZRYhdY=",
|
"integrity": "sha1-LiTxC4k/bUfmUWpZXRvCwIEMJ1k=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/compiler": {
|
"@angular/compiler": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-bIjDSFVY3PhRRPVe2xKZ2ZzbP+w=",
|
"integrity": "sha1-1sS1JkLOllo6os3CU5fPEbqfRyk=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/compiler-cli": {
|
"@angular/compiler-cli": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-YrY+ML2ukQwyKmK3b6eQ3Ups31M=",
|
"integrity": "sha1-zb0OPIf/wCxDCf6vyXHWdOIfIDA=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"chokidar": "1.7.0",
|
"chokidar": "1.7.0",
|
||||||
@ -200,55 +200,55 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/core": {
|
"@angular/core": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-6UshyuRHnK7ZSGI5sGUwKpfF/U8=",
|
"integrity": "sha1-rcO4A4I+tR7gBkKqbVSWJHe9uOE=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/forms": {
|
"@angular/forms": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-/u7ikEHM4ifMUOJU6+zC8Z3FKe4=",
|
"integrity": "sha1-AJl15xMG+0/injS/Di3MPrLFplM=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/http": {
|
"@angular/http": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-k1vquir+oZLWp1ocO419/Xh2QbA=",
|
"integrity": "sha1-HyK7ODb04RKdO+NIhFSbbTB6TxQ=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/language-service": {
|
"@angular/language-service": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-nWa0OxQ0b8cRutimpnfIiMVzxRs=",
|
"integrity": "sha1-HeN+4dTmEgbKBLZp0tO63iPbXBk=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@angular/platform-browser": {
|
"@angular/platform-browser": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-zPyp0XLwMxN8g/L76LcC/nIExdU=",
|
"integrity": "sha1-s499o87vvwcL2rUwD4buez8h2wc=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/platform-browser-dynamic": {
|
"@angular/platform-browser-dynamic": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-vuHTf3MAAw7dhV7fZjEbDUkyUtU=",
|
"integrity": "sha1-EnSnffyozWG6Y1/q4QhIf9jBErs=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/router": {
|
"@angular/router": {
|
||||||
"version": "5.1.0-beta.2",
|
"version": "5.1.0-rc.1",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-rc.1.tgz",
|
||||||
"integrity": "sha1-oiuMDgi4HIsJULmmaKqJPp8cDkw=",
|
"integrity": "sha1-RRxDR2PDYbdbL++see2SH24DtV8=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.8.0"
|
"tslib": "1.8.0"
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { CommonModule } from '@angular/common';
|
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';
|
import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule, FormsModule, BasicInputsPageRoutingModule, SharedModule],
|
imports: [
|
||||||
|
BasicInputsPageRoutingModule,
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
IonicAngularModule
|
||||||
|
],
|
||||||
declarations: [BasicInputsPageComponent],
|
declarations: [BasicInputsPageComponent],
|
||||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||||
})
|
})
|
||||||
|
@ -1,17 +1,17 @@
|
|||||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { IonicAngularModule } from '@ionic/angular';
|
||||||
|
|
||||||
import { GroupInputsPageComponent } from './group-inputs-page.component';
|
import { GroupInputsPageComponent } from './group-inputs-page.component';
|
||||||
import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
|
import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
|
||||||
import { SharedModule } from '../shared/shared.module';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
GroupInputsPageRoutingModule,
|
GroupInputsPageRoutingModule,
|
||||||
SharedModule
|
IonicAngularModule
|
||||||
],
|
],
|
||||||
declarations: [GroupInputsPageComponent],
|
declarations: [GroupInputsPageComponent],
|
||||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||||
|
@ -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 {}
|
|
@ -1,13 +1,22 @@
|
|||||||
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
||||||
import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
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({
|
@Directive({
|
||||||
/* tslint:disable-next-line:directive-selector */
|
/* tslint:disable-next-line:directive-selector */
|
||||||
selector: 'ion-checkbox,ion-toggle',
|
selector: 'ion-checkbox,ion-toggle',
|
||||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
|
providers: [
|
||||||
|
{
|
||||||
|
provide: NG_VALUE_ACCESSOR,
|
||||||
|
useExisting: IonBooleanValueAccessor,
|
||||||
|
multi: true
|
||||||
|
}
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
|
export class IonBooleanValueAccessor implements ControlValueAccessor {
|
||||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||||
this.onChange = () => {};
|
this.onChange = () => {};
|
||||||
this.onTouched = () => {};
|
this.onTouched = () => {};
|
||||||
@ -39,6 +48,10 @@ export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setDisabledState(isDisabled: boolean): void {
|
setDisabledState(isDisabled: boolean): void {
|
||||||
this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled);
|
this.renderer.setProperty(
|
||||||
|
this.element.nativeElement,
|
||||||
|
'disabled',
|
||||||
|
isDisabled
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -12,21 +12,19 @@ import {
|
|||||||
NG_VALUE_ACCESSOR
|
NG_VALUE_ACCESSOR
|
||||||
} from '@angular/forms';
|
} from '@angular/forms';
|
||||||
|
|
||||||
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
|
|
||||||
@Directive({
|
@Directive({
|
||||||
/* tslint:disable-next-line:directive-selector */
|
/* tslint:disable-next-line:directive-selector */
|
||||||
selector: 'ion-radio',
|
selector: 'ion-radio',
|
||||||
providers: [
|
providers: [
|
||||||
{
|
{
|
||||||
provide: NG_VALUE_ACCESSOR,
|
provide: NG_VALUE_ACCESSOR,
|
||||||
useExisting: IonRadioValueAccessorDirective,
|
useExisting: IonRadioValueAccessor,
|
||||||
multi: true
|
multi: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class IonRadioValueAccessorDirective implements ControlValueAccessor {
|
export class IonRadioValueAccessor implements ControlValueAccessor {
|
||||||
@Input() value: any;
|
@Input() value: any;
|
||||||
@Input() name: string;
|
|
||||||
|
|
||||||
onChange: (value: any) => void;
|
onChange: (value: any) => void;
|
||||||
onTouched: () => void;
|
onTouched: () => void;
|
@ -1,15 +1,14 @@
|
|||||||
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
||||||
import { ControlValueAccessor, 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
|
// NOTE: May need to look at this to see if we need anything else:
|
||||||
// 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
|
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
|
||||||
@Directive({
|
@Directive({
|
||||||
/* tslint:disable-next-line:directive-selector */
|
/* tslint:disable-next-line:directive-selector */
|
||||||
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
|
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
|
||||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessor, multi: true }]
|
||||||
})
|
})
|
||||||
export class IonSelectValueAccessorDirective implements ControlValueAccessor {
|
export class IonSelectValueAccessor implements ControlValueAccessor {
|
||||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||||
this.onChange = () => {};
|
this.onChange = () => {};
|
||||||
this.onTouched = () => {};
|
this.onTouched = () => {};
|
@ -1,15 +1,14 @@
|
|||||||
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
|
||||||
import { ControlValueAccessor, 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
|
// NOTE: May need to look at this to see if we need anything else:
|
||||||
// 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
|
// https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
|
||||||
@Directive({
|
@Directive({
|
||||||
/* tslint:disable-next-line:directive-selector */
|
/* tslint:disable-next-line:directive-selector */
|
||||||
selector: 'ion-input,ion-textarea',
|
selector: 'ion-input,ion-textarea',
|
||||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessor, multi: true }]
|
||||||
})
|
})
|
||||||
export class IonTextValueAccessorDirective implements ControlValueAccessor {
|
export class IonTextValueAccessor implements ControlValueAccessor {
|
||||||
constructor(private element: ElementRef, private renderer: Renderer2) {
|
constructor(private element: ElementRef, private renderer: Renderer2) {
|
||||||
this.onChange = () => {};
|
this.onChange = () => {};
|
||||||
this.onTouched = () => {};
|
this.onTouched = () => {};
|
@ -1,15 +1,27 @@
|
|||||||
|
|
||||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
|
||||||
|
import { IonBooleanValueAccessor } from './directives/ion-boolean-value-accessor';
|
||||||
import { IonNavDelegate } from './directives/ion-nav';
|
import { IonNavDelegate } from './directives/ion-nav';
|
||||||
|
import { IonRadioValueAccessor } from './directives/ion-radio-value-accessor';
|
||||||
|
import { IonSelectValueAccessor } from './directives/ion-select-value-accessor';
|
||||||
|
import { IonTextValueAccessor } from './directives/ion-text-value-accessor';
|
||||||
|
|
||||||
import { AlertController } from './providers/alert-controller';
|
import { AlertController } from './providers/alert-controller';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
IonNavDelegate
|
IonBooleanValueAccessor,
|
||||||
|
IonNavDelegate,
|
||||||
|
IonRadioValueAccessor,
|
||||||
|
IonSelectValueAccessor,
|
||||||
|
IonTextValueAccessor
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
IonNavDelegate
|
IonBooleanValueAccessor,
|
||||||
|
IonNavDelegate,
|
||||||
|
IonRadioValueAccessor,
|
||||||
|
IonSelectValueAccessor,
|
||||||
|
IonTextValueAccessor
|
||||||
],
|
],
|
||||||
schemas: [
|
schemas: [
|
||||||
CUSTOM_ELEMENTS_SCHEMA
|
CUSTOM_ELEMENTS_SCHEMA
|
||||||
@ -20,4 +32,4 @@ import { AlertController } from './providers/alert-controller';
|
|||||||
})
|
})
|
||||||
export class IonicAngularModule {
|
export class IonicAngularModule {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user