From 7e4269a4c17e798689c2ff7f6a9297c783ef04df Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 12 Feb 2024 19:50:41 -0500 Subject: [PATCH 1/2] refactor(angular): apply range to numeric value accessor --- .../numeric-value-accessor.ts | 14 ++++++++------ .../control-value-accessors/text-value-accessor.ts | 7 ++----- .../angular/test/base/e2e/src/lazy/inputs.spec.ts | 3 +++ .../base/src/app/lazy/inputs/inputs.component.html | 6 ++++++ .../base/src/app/lazy/inputs/inputs.component.ts | 3 +++ 5 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts index e63a91f3c7c..dfa90a9b465 100644 --- a/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts +++ b/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts @@ -3,7 +3,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { ValueAccessor } from '@ionic/angular/common'; @Directive({ - selector: 'ion-input[type=number]', + selector: 'ion-input[type=number],ion-range', providers: [ { provide: NG_VALUE_ACCESSOR, @@ -13,18 +13,20 @@ import { ValueAccessor } from '@ionic/angular/common'; ], }) export class NumericValueAccessorDirective extends ValueAccessor { - constructor(injector: Injector, el: ElementRef) { + constructor(injector: Injector, private el: ElementRef) { super(injector, el); } @HostListener('ionInput', ['$event.target']) - handleInputEvent(el: HTMLIonInputElement): void { + handleInputEvent(el: HTMLIonInputElement | HTMLIonRangeElement): void { this.handleValueChange(el, el.value); } registerOnChange(fn: (_: number | null) => void): void { - super.registerOnChange((value: string) => { - fn(value === '' ? null : parseFloat(value)); - }); + if (this.el.nativeElement.tagName === 'ION-INPUT') { + super.registerOnChange((value: string) => { + fn(value === '' ? null : parseFloat(value)); + }); + } } } diff --git a/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts index 14395dfeb44..f4b52198cf5 100644 --- a/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts +++ b/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts @@ -2,9 +2,8 @@ import { ElementRef, Injector, Directive, HostListener } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { ValueAccessor } from '@ionic/angular/common'; -// TODO(FW-5495): rename class since range isn't a text component @Directive({ - selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range', + selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar', providers: [ { provide: NG_VALUE_ACCESSOR, @@ -19,9 +18,7 @@ export class TextValueAccessorDirective extends ValueAccessor { } @HostListener('ionInput', ['$event.target']) - _handleInputEvent( - el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement | HTMLIonRangeElement - ): void { + _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void { this.handleValueChange(el, el.value); } } 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 bbc677bd7ab..5f9bb0525ae 100644 --- a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts +++ b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts @@ -10,6 +10,7 @@ describe('Inputs', () => { 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'); cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes'); + cy.get('ion-range').should('have.prop', 'value').and('equal', 50); }); it('should have reset value', () => { @@ -27,6 +28,7 @@ describe('Inputs', () => { cy.get('ion-input').should('not.have.prop', 'value'); cy.get('ion-datetime').should('not.have.prop', 'value'); cy.get('ion-select').should('not.have.prop', 'value'); + cy.get('ion-range').should('not.have.prop', 'value'); }); it('should get some value', () => { @@ -39,6 +41,7 @@ describe('Inputs', () => { 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'); cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes'); + cy.get('ion-range').should('have.prop', 'value').and('equal', 50); }); it('change values should update angular', () => { 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 63b6264359d..07cf0727e33 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 @@ -99,6 +99,12 @@ {{radio}} + + + Range + + +

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 a2fa0996c7b..59d3b1ca8e3 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 @@ -13,6 +13,7 @@ export class InputsComponent { toggle = true; select? = 'nes'; changes = 0; + range? = 50; setValues() { console.log('set values'); @@ -22,6 +23,7 @@ export class InputsComponent { this.radio = 'nes'; this.toggle = true; this.select = 'nes'; + this.range = 50; } resetValues() { @@ -32,6 +34,7 @@ export class InputsComponent { this.radio = undefined; this.toggle = false; this.select = undefined; + this.range = undefined; } counter() { From 4f236e9fa05a751361eefaa89869aec01ddcd964 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 12 Feb 2024 20:08:34 -0500 Subject: [PATCH 2/2] fix: implementation --- .../control-value-accessors/numeric-value-accessor.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts index dfa90a9b465..9e79f816fe1 100644 --- a/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts +++ b/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts @@ -27,6 +27,8 @@ export class NumericValueAccessorDirective extends ValueAccessor { super.registerOnChange((value: string) => { fn(value === '' ? null : parseFloat(value)); }); + } else { + super.registerOnChange(fn); } } }