From f04fa23e0d4285484b0ccbb8ce76fc44f555f737 Mon Sep 17 00:00:00 2001 From: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com> Date: Thu, 12 Mar 2026 13:29:07 -0600 Subject: [PATCH] test(angular): validate checkbox and toggle in lazy template-form (#31005) ## What is the current behavior? Checkbox and toggle components are not validated to be ticked/on in `packages/angular/test/base/src/app/lazy/template-form`. This prevents the error text from being displayed. While they have the `required` attribute, this only applies to accessibility for [checkbox](https://ionicframework.com/docs/api/checkbox#required) and [toggle](https://ionicframework.com/docs/api/toggle#required). ## What is the new behavior? - Use an Angular validator directive for checkbox and toggle. - Make template-form an Angular module so the validator directive can be imported. ## Does this introduce a breaking change? - [ ] Yes - [X] No --- .../base/src/app/lazy/app-lazy/app.module.ts | 4 +--- .../base/src/app/lazy/app-lazy/app.routes.ts | 3 +-- .../template-form-routing.module.ts | 16 +++++++++++++ .../template-form.component.html | 2 ++ .../template-form/template-form.module.ts | 23 +++++++++++++++++++ .../lazy/validators/require-true.directive.ts | 19 +++++++++++++++ .../app/lazy/validators/validators.module.ts | 20 ++++++++++++++++ 7 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts create mode 100644 packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts create mode 100644 packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts create mode 100644 packages/angular/test/base/src/app/lazy/validators/validators.module.ts diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts index ac0ebd501f..caf27670d2 100644 --- a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts +++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts @@ -28,7 +28,6 @@ import { AlertComponent } from '../alert/alert.component'; import { AccordionComponent } from '../accordion/accordion.component'; import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component'; import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component'; -import { TemplateFormComponent } from '../template-form/template-form.component'; @NgModule({ declarations: [ @@ -54,8 +53,7 @@ import { TemplateFormComponent } from '../template-form/template-form.component' AlertComponent, AccordionComponent, AccordionModalComponent, - TabsBasicComponent, - TemplateFormComponent + TabsBasicComponent ], imports: [ CommonModule, diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts index 35a77b19cf..84e06cef8b 100644 --- a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts +++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts @@ -19,7 +19,6 @@ import { NavigationPage3Component } from '../navigation-page3/navigation-page3.c import { AlertComponent } from '../alert/alert.component'; import { AccordionComponent } from '../accordion/accordion.component'; import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component'; -import { TemplateFormComponent } from '../template-form/template-form.component'; export const routes: Routes = [ { @@ -34,7 +33,7 @@ export const routes: Routes = [ { path: 'textarea', loadChildren: () => import('../textarea/textarea.module').then(m => m.TextareaModule) }, { path: 'searchbar', loadChildren: () => import('../searchbar/searchbar.module').then(m => m.SearchbarModule) }, { path: 'form', component: FormComponent }, - { path: 'template-form', component: TemplateFormComponent }, + { path: 'template-form', loadChildren: () => import('../template-form/template-form.module').then(m => m.TemplateFormModule) }, { path: 'modals', component: ModalComponent }, { path: 'modal-inline', loadChildren: () => import('../modal-inline').then(m => m.ModalInlineModule) }, { path: 'modal-sheet-inline', loadChildren: () => import('../modal-sheet-inline').then(m => m.ModalSheetInlineModule) }, diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts b/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts new file mode 100644 index 0000000000..c9d57690c6 --- /dev/null +++ b/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from "@angular/core"; +import { RouterModule } from "@angular/router"; +import { TemplateFormComponent } from "./template-form.component"; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { + path: '', + component: TemplateFormComponent + } + ]) + ], + exports: [RouterModule] +}) +export class TemplateFormRoutingModule { } diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html index 870f53872f..e6203e183a 100644 --- a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html +++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html @@ -109,6 +109,7 @@ [(ngModel)]="checkboxValue" name="checkboxField" required + requireTrue #checkboxField="ngModel" id="template-checkbox-test" helper-text="You must agree to continue" @@ -133,6 +134,7 @@ [(ngModel)]="toggleValue" name="toggleField" required + requireTrue #toggleField="ngModel" id="template-toggle-test" helper-text="You must turn on to continue" diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts b/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts new file mode 100644 index 0000000000..d25e9d41a1 --- /dev/null +++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts @@ -0,0 +1,23 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { IonicModule } from "@ionic/angular"; + +import { TemplateFormRoutingModule } from "./template-form-routing.module"; +import { TemplateFormComponent } from "./template-form.component"; +import { ValidatorsModule } from "../validators/validators.module"; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + IonicModule, + TemplateFormRoutingModule, + ValidatorsModule + ], + declarations: [ + TemplateFormComponent + ] +}) +export class TemplateFormModule { } diff --git a/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts b/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts new file mode 100644 index 0000000000..73baf28ff6 --- /dev/null +++ b/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts @@ -0,0 +1,19 @@ +import { Directive, forwardRef } from '@angular/core'; +import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors, Validators } from '@angular/forms'; + +@Directive({ + selector: '[requireTrue]', + providers: [ + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => RequireTrueValidatorDirective), + multi: true, + }, + ], + standalone: false, +}) +export class RequireTrueValidatorDirective implements Validator { + validate(control: AbstractControl): ValidationErrors | null { + return Validators.requiredTrue(control); + } +} diff --git a/packages/angular/test/base/src/app/lazy/validators/validators.module.ts b/packages/angular/test/base/src/app/lazy/validators/validators.module.ts new file mode 100644 index 0000000000..c135d3164b --- /dev/null +++ b/packages/angular/test/base/src/app/lazy/validators/validators.module.ts @@ -0,0 +1,20 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; + +import { RequireTrueValidatorDirective } from "./require-true.directive"; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule + ], + declarations: [ + RequireTrueValidatorDirective + ], + exports: [ + RequireTrueValidatorDirective + ] +}) +export class ValidatorsModule { }