diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/index.ts
index 4ceda8f0c9..889f84086b 100644
--- a/src/components/modal/test/basic/index.ts
+++ b/src/components/modal/test/basic/index.ts
@@ -247,15 +247,15 @@ class ToolbarModal {
Title (Required)
-
+
Note (Required)
-
+
Icon
-
+
diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts
index c4a1beea55..286301befc 100644
--- a/src/components/radio/radio-button.ts
+++ b/src/components/radio/radio-button.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, HostListener, Input, Optional, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, ViewEncapsulation } from '@angular/core';
import { Form } from '../../util/form';
import { isBlank, isCheckedProperty, isPresent, isTrueProperty } from '../../util/util';
@@ -61,7 +61,7 @@ import { RadioGroup } from './radio-group';
},
encapsulation: ViewEncapsulation.None,
})
-export class RadioButton {
+export class RadioButton implements OnDestroy, OnInit {
private _checked: boolean = false;
private _disabled: boolean = false;
private _labelId: string;
diff --git a/src/components/radio/radio-group.ts b/src/components/radio/radio-group.ts
index 8f9a9fdc6c..d37e7c92eb 100644
--- a/src/components/radio/radio-group.ts
+++ b/src/components/radio/radio-group.ts
@@ -1,5 +1,5 @@
-import { ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Input, Output, Provider, Renderer } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/common';
+import { AfterContentInit, ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Input, Output, Provider, Renderer } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ListHeader } from '../list/list';
import { isCheckedProperty } from '../../util/util';
@@ -67,7 +67,7 @@ const RADIO_VALUE_ACCESSOR = new Provider(
},
providers: [RADIO_VALUE_ACCESSOR]
})
-export class RadioGroup {
+export class RadioGroup implements AfterContentInit, ControlValueAccessor {
private _btns: Array = [];
private _fn: Function;
private _ids: number = -1;
@@ -95,6 +95,16 @@ export class RadioGroup {
this.id = ++radioGroupIds;
}
+ /**
+ * @private
+ */
+ ngAfterContentInit() {
+ let activeButton = this._btns.find(b => b.checked);
+ if (activeButton) {
+ this._setActive(activeButton);
+ }
+ }
+
/**
* @private
*/
@@ -111,23 +121,13 @@ export class RadioGroup {
this._init = true;
}
- /**
- * @private
- */
- ngAfterContentInit() {
- let activeButton = this._btns.find(b => b.checked);
- if (activeButton) {
- this._setActive(activeButton);
- }
- }
-
/**
* @private
*/
registerOnChange(fn: Function): void {
this._fn = fn;
this.onChange = (val: any) => {
- // onChange used when there's an ngControl
+ // onChange used when there's an formControlName
console.debug('radio group, onChange', val);
fn(val);
this.value = val;
@@ -212,8 +212,8 @@ export class RadioGroup {
* @private
*/
onChange(val: any) {
- // onChange used when there is not an ngControl
- console.debug('radio group, onChange w/out ngControl', val);
+ // onChange used when there is not an formControlName
+ console.debug('radio group, onChange w/out formControlName', val);
this.value = val;
this._update();
this.onTouched();
diff --git a/src/components/radio/test/basic/index.ts b/src/components/radio/test/basic/index.ts
index 0ad6806608..445d74b5c4 100644
--- a/src/components/radio/test/basic/index.ts
+++ b/src/components/radio/test/basic/index.ts
@@ -1,31 +1,31 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from '../../../../../src';
-import {Control, ControlGroup} from '@angular/common';
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { ionicBootstrap, RadioButton, RadioGroup } from '../../../../../src';
@Component({
templateUrl: 'main.html'
})
class E2EPage {
- fruits: Control;
- fruitsForm: ControlGroup;
- currenciesControl: Control;
- currencyForm: ControlGroup;
+ fruits: FormControl;
+ fruitsForm: FormGroup;
+ currenciesControl: FormControl;
+ currencyForm: FormGroup;
currencies: Array;
items: Array<{description: string, value: any}>;
relationship: string;
selectedTime: number = 60;
constructor() {
- this.fruits = new Control('apple');
+ this.fruits = new FormControl('apple');
- this.fruitsForm = new ControlGroup({
+ this.fruitsForm = new FormGroup({
'fruits': this.fruits
});
this.currencies = ['USD', 'EUR'];
- this.currenciesControl = new Control('EUR');
- this.currencyForm = new ControlGroup({
+ this.currenciesControl = new FormControl('EUR');
+ this.currencyForm = new FormGroup({
'currenciesControl': this.currenciesControl
});
@@ -51,25 +51,25 @@ class E2EPage {
this.fruits.updateValue('cherry');
}
- doSubmit(event) {
+ doSubmit(ev: UIEvent) {
console.log('Submitting form', this.fruitsForm.value);
- event.preventDefault();
+ ev.preventDefault();
}
- petChange(ev) {
- console.log('petChange', ev);
+ petChange(radioGroup: RadioGroup) {
+ console.log('petChange', radioGroup);
}
- dogSelect(ev) {
- console.log('dogSelect', ev);
+ dogSelect(radioButton: RadioButton) {
+ console.log('dogSelect', radioButton);
}
- catSelect(ev) {
- console.log('catSelect', ev);
+ catSelect(radioButton: RadioButton) {
+ console.log('catSelect', radioButton);
}
- turtleSelect(ev) {
- console.log('turtleSelect', ev);
+ turtleSelect(radioButton: RadioButton) {
+ console.log('turtleSelect', radioButton);
}
}
diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html
index 007d1bc22a..036fd224b1 100644
--- a/src/components/radio/test/basic/main.html
+++ b/src/components/radio/test/basic/main.html
@@ -10,9 +10,9 @@
-
-