mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
feat(angular/demo): add test for stand-alone radio button
This commit is contained in:
@ -70,7 +70,7 @@
|
|||||||
<h3>Ionic Without Radio Group</h3>
|
<h3>Ionic Without Radio Group</h3>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
<!-- <ion-row>
|
<ion-row>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
@ -96,7 +96,7 @@
|
|||||||
</ion-list>
|
</ion-list>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
<ion-col></ion-col>
|
<ion-col></ion-col>
|
||||||
</ion-row> -->
|
</ion-row>
|
||||||
|
|
||||||
</ion-grid>
|
</ion-grid>
|
||||||
<a href='home'>Home</a>
|
<a href='home'>Home</a>
|
||||||
|
|||||||
@ -0,0 +1,74 @@
|
|||||||
|
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,11 +1,22 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
|
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 { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive';
|
||||||
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
|
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
exports: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective],
|
exports: [
|
||||||
declarations: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective]
|
IonBooleanValueAccessorDirective,
|
||||||
|
IonRadioValueAccessorDirective,
|
||||||
|
IonSelectValueAccessorDirective,
|
||||||
|
IonTextValueAccessorDirective
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
IonBooleanValueAccessorDirective,
|
||||||
|
IonRadioValueAccessorDirective,
|
||||||
|
IonSelectValueAccessorDirective,
|
||||||
|
IonTextValueAccessorDirective
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class SharedModule { }
|
export class SharedModule {}
|
||||||
|
|||||||
4
packages/angular/package-lock.json
generated
4
packages/angular/package-lock.json
generated
@ -3,6 +3,7 @@
|
|||||||
"version": "0.0.2-2",
|
"version": "0.0.2-2",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
|
"lockfileVersion": 1,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/common": {
|
"@angular/common": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
@ -3253,8 +3254,7 @@
|
|||||||
"typescript": {
|
"typescript": {
|
||||||
"version": "2.4.2",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.4.2.tgz",
|
||||||
"integrity": "sha1-+DlfhdRZJ2BnyYiqQYN6j4KHCEQ=",
|
"integrity": "sha1-+DlfhdRZJ2BnyYiqQYN6j4KHCEQ="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"uglify-es": {
|
"uglify-es": {
|
||||||
"version": "3.1.6",
|
"version": "3.1.6",
|
||||||
|
|||||||
Reference in New Issue
Block a user