diff --git a/packages/angular/src/directives/control-value-accessors/index.ts b/packages/angular/src/directives/control-value-accessors/index.ts
index f18d651097..84a18e0b92 100644
--- a/packages/angular/src/directives/control-value-accessors/index.ts
+++ b/packages/angular/src/directives/control-value-accessors/index.ts
@@ -1,5 +1,4 @@
export * from './boolean-value-accessor';
export * from './numeric-value-accessor';
-export * from './radio-value-accessor';
export * from './select-value-accessor';
export * from './text-value-accessor';
diff --git a/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts
deleted file mode 100644
index 014a2cf1c0..0000000000
--- a/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '@ionic/angular/common';
-
-@Directive({
- /* tslint:disable-next-line:directive-selector */
- selector: 'ion-radio',
- providers: [
- {
- provide: NG_VALUE_ACCESSOR,
- useExisting: RadioValueAccessorDirective,
- multi: true,
- },
- ],
-})
-export class RadioValueAccessorDirective extends ValueAccessor {
- constructor(injector: Injector, el: ElementRef) {
- super(injector, el);
- }
-
- @HostListener('ionSelect', ['$event.target'])
- _handleIonSelect(el: any): void {
- /**
- * The `el` type is any to access the `checked` state property
- * that is not exposed on the type interface.
- */
- this.handleValueChange(el, el.checked);
- }
-}
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index 6db8e3d7d2..d84b9622f3 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -1,7 +1,6 @@
// DIRECTIVES
export { BooleanValueAccessorDirective as BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor';
export { NumericValueAccessorDirective as NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accessor';
-export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
export { IonTabs } from './directives/navigation/ion-tabs';
diff --git a/packages/angular/src/ionic-module.ts b/packages/angular/src/ionic-module.ts
index e8b0af6e2c..96c5fa44c3 100644
--- a/packages/angular/src/ionic-module.ts
+++ b/packages/angular/src/ionic-module.ts
@@ -13,7 +13,6 @@ import { appInitialize } from './app-initialize';
import {
BooleanValueAccessorDirective,
NumericValueAccessorDirective,
- RadioValueAccessorDirective,
SelectValueAccessorDirective,
TextValueAccessorDirective,
} from './directives/control-value-accessors';
@@ -41,7 +40,6 @@ const DECLARATIONS = [
// ngModel accessors
BooleanValueAccessorDirective,
NumericValueAccessorDirective,
- RadioValueAccessorDirective,
SelectValueAccessorDirective,
TextValueAccessorDirective,
diff --git a/packages/angular/standalone/src/directives/radio.ts b/packages/angular/standalone/src/directives/radio.ts
index d70ea8d01d..7939eb0909 100644
--- a/packages/angular/standalone/src/directives/radio.ts
+++ b/packages/angular/standalone/src/directives/radio.ts
@@ -1,16 +1,5 @@
-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- ElementRef,
- EventEmitter,
- HostListener,
- Injector,
- NgZone,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
import type { OnInit } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '@ionic/angular/common';
import type { Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-radio.js';
@@ -22,9 +11,9 @@ import { defineCustomElement } from '@ionic/core/components/ion-radio.js';
* class) causes ng-packagr to output multiple component variables
* which breaks treeshaking.
* For example, the following would be generated:
- * let IonRadio = IonRadio_1 = class IonRadio extends ValueAccessor {
+ * let IonRadio = IonRadio_1 = class IonRadio {
* Instead, we want only want the class generated:
- * class IonRadio extends ValueAccessor {
+ * class IonRadio {
*/
import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
@@ -36,19 +25,11 @@ const RADIO_INPUTS = ['color', 'disabled', 'justify', 'labelPlacement', 'legacy'
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: RADIO_INPUTS,
- providers: [
- {
- provide: NG_VALUE_ACCESSOR,
- useExisting: IonRadio,
- multi: true,
- },
- ],
standalone: true,
})
-export class IonRadio extends ValueAccessor implements OnInit {
+export class IonRadio implements OnInit {
protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
- super(injector, r);
+ constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
defineCustomElement();
c.detach();
this.el = r.nativeElement;
@@ -63,15 +44,6 @@ export class IonRadio extends ValueAccessor implements OnInit {
*/
proxyInputs(IonRadio, RADIO_INPUTS);
}
-
- @HostListener('ionSelect', ['$event.target'])
- handleIonSelect(el: any): void {
- /**
- * The `el` type is any to access the `checked` state property
- * that is not exposed on the type interface.
- */
- this.handleValueChange(el, el.checked);
- }
}
export declare interface IonRadio extends Components.IonRadio {
diff --git a/packages/angular/test/base/e2e/src/lazy/form.spec.ts b/packages/angular/test/base/e2e/src/lazy/form.spec.ts
index 596cb98bfe..65611cd151 100644
--- a/packages/angular/test/base/e2e/src/lazy/form.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/form.spec.ts
@@ -32,7 +32,8 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: false
+ checkbox: false,
+ radio: null
});
});
@@ -59,7 +60,8 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: false
+ checkbox: false,
+ radio: null
});
});
@@ -73,7 +75,8 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: false
+ checkbox: false,
+ radio: null
});
});
@@ -87,7 +90,23 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: true
+ checkbox: true,
+ radio: null
+ });
+ });
+
+ it('ion-radio should change', () => {
+ cy.get('ion-radio').click();
+ testData({
+ datetime: '2010-08-20',
+ select: null,
+ toggle: false,
+ input: '',
+ input2: 'Default Value',
+ inputMin: 1,
+ inputMax: 1,
+ checkbox: false,
+ radio: 'nes'
});
});
@@ -109,7 +128,8 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: false
+ checkbox: false,
+ radio: null
});
cy.get('ion-checkbox').click();
testData({
@@ -120,7 +140,8 @@ describe('Form', () => {
input2: 'Default Value',
inputMin: 1,
inputMax: 1,
- checkbox: true
+ checkbox: true,
+ radio: null
});
});
});
diff --git a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
index d79f3b92a6..bbc677bd7a 100644
--- a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
@@ -5,6 +5,7 @@ describe('Inputs', () => {
it('should have default value', () => {
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
+ cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
@@ -15,6 +16,7 @@ describe('Inputs', () => {
cy.get('#reset-button').click();
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
+ cy.get('ion-radio-group').should('not.have.prop', 'value');
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', false);
/**
* The `value` property gets set to undefined
@@ -32,6 +34,7 @@ describe('Inputs', () => {
cy.get('#set-button').click();
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
+ cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
@@ -42,6 +45,7 @@ describe('Inputs', () => {
cy.get('#reset-button').click();
cy.get('ion-checkbox#first-checkbox').click();
+ cy.get('ion-radio').first().click();
cy.get('ion-toggle').first().click();
cy.get('ion-input').eq(0).type('hola');
@@ -58,6 +62,7 @@ describe('Inputs', () => {
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
cy.get('#checkbox-note').should('have.text', 'true');
+ cy.get('#radio-note').should('have.text', 'nes');
cy.get('#toggle-note').should('have.text', 'true');
cy.get('#input-note').should('have.text', 'hola');
cy.get('#datetime-note').should('have.text', '1994-03-14');
diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.html b/packages/angular/test/base/src/app/lazy/form/form.component.html
index f5891cb19f..ab15fae6df 100644
--- a/packages/angular/test/base/src/app/lazy/form/form.component.html
+++ b/packages/angular/test/base/src/app/lazy/form/form.component.html
@@ -48,6 +48,12 @@
Checkbox
+
+
+ Radio
+
+
+
Min
diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.ts b/packages/angular/test/base/src/app/lazy/form/form.component.ts
index 131237632c..afb8e5355c 100644
--- a/packages/angular/test/base/src/app/lazy/form/form.component.ts
+++ b/packages/angular/test/base/src/app/lazy/form/form.component.ts
@@ -20,7 +20,8 @@ export class FormComponent {
input2: ['Default Value'],
inputMin: [1, Validators.min(1)],
inputMax: [1, Validators.max(1)],
- checkbox: [false]
+ checkbox: [false],
+ radio: [undefined]
}, {
updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
});
@@ -44,7 +45,8 @@ export class FormComponent {
toggle: true,
input: 'Some value',
input2: 'Another values',
- checkbox: true
+ checkbox: true,
+ radio: 'nes'
});
}
diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
index ea19d0c77e..63b6264359 100644
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
+++ b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
@@ -85,6 +85,20 @@
{{checkbox}}
+
+
+ Radio
+
+ {{radio}}
+
+
+
+
+ Radio Mirror
+
+ {{radio}}
+
+
Set values
diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
index 28d8ef9499..a2fa0996c7 100644
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
+++ b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
@@ -9,6 +9,7 @@ export class InputsComponent {
datetime? = '1994-03-15';
input? = 'some text';
checkbox = true;
+ radio? = 'nes';
toggle = true;
select? = 'nes';
changes = 0;
@@ -18,6 +19,7 @@ export class InputsComponent {
this.datetime = '1994-03-15';
this.input = 'some text';
this.checkbox = true;
+ this.radio = 'nes';
this.toggle = true;
this.select = 'nes';
}
@@ -27,6 +29,7 @@ export class InputsComponent {
this.datetime = undefined;
this.input = undefined;
this.checkbox = false;
+ this.radio = undefined;
this.toggle = false;
this.select = undefined;
}