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

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,
+    TabsBasicComponent
-    TemplateFormComponent
   ],
   imports: [
     CommonModule,

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) },

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 { }

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"

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 { }

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);
+  }
+}

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 { }