refactor(tests, input): doing cleanup across input and tests

Author: ShaneK

core/src/components/input/input.tsx

@@ -406,7 +406,7 @@ export class Input implements ComponentInterface {
   /**
    * Checks if the input is in an invalid state based on Ionic validation classes
    */
-  private checkValidationState(): boolean {
+  private checkInvalidState(): boolean {
     const hasIonTouched = this.el.classList.contains('ion-touched');
     const hasIonInvalid = this.el.classList.contains('ion-invalid');
 
@@ -426,7 +426,7 @@ export class Input implements ComponentInterface {
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = this.checkValidationState();
+        const newIsInvalid = this.checkInvalidState();
         if (this.isInvalid !== newIsInvalid) {
           this.isInvalid = newIsInvalid;
           // Force a re-render to update aria-describedby immediately
@@ -441,7 +441,7 @@ export class Input implements ComponentInterface {
     }
 
     // Always set initial state
-    this.isInvalid = this.checkValidationState();
+    this.isInvalid = this.checkInvalidState();
 
     this.debounceChanged();
     if (Build.isBrowser) {

core/src/components/input/test/validation/index.html

@@ -30,14 +30,6 @@
         margin-bottom: 5px;
       }
 
-      .aria-live-region {
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-      }
-
       .validation-info {
         margin: 20px;
         padding: 10px;

core/src/components/textarea/test/validation/index.html

@@ -30,14 +30,6 @@
         margin-bottom: 5px;
       }
 
-      .aria-live-region {
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-      }
-
       .validation-info {
         margin: 20px;
         padding: 10px;

packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.html

@@ -125,7 +125,7 @@ <h2>Optional Field (No Validation)</h2>
   </form>
 
   <div class="ion-padding">
-    <ion-button id="submit-btn" expand="block" [disabled]="!isFormValid()" (click)="onSubmit()">Submit Form</ion-button>
-    <ion-button id="reset-btn" expand="block" fill="outline" (click)="onReset()">Reset Form</ion-button>
+    <ion-button id="submit-btn" expand="block" [disabled]="form.invalid" (click)="onSubmit()">Submit Form</ion-button>
+    <ion-button id="reset-btn" expand="block" fill="outline" (click)="form.reset()">Reset Form</ion-button>
   </div>
 </ion-content>

packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.ts

@@ -31,9 +31,6 @@ import {
   ]
 })
 export class InputValidationComponent {
-  // Track which fields have been touched (using Set like vanilla test)
-  touchedFields = new Set<string>();
-
   // Field metadata for labels and error messages
   fieldMetadata = {
     email: {
@@ -79,47 +76,10 @@ export class InputValidationComponent {
 
   constructor(private fb: FormBuilder) {}
 
-  // Check if a field is invalid
-  isInvalid(fieldName: string): boolean {
-    const control = this.form.get(fieldName);
-    return !!(control && control.invalid && control.touched);
-  }
-
-  // Check if a field is valid
-  isValid(fieldName: string): boolean {
-    const control = this.form.get(fieldName);
-    return !!(control && control.valid && control.touched);
-  }
-
-
-  // Check if form is valid (excluding optional field)
-  isFormValid(): boolean {
-    const requiredFields = ['email', 'name', 'phone', 'password', 'age'];
-    return requiredFields.every(field => {
-      const control = this.form.get(field);
-      return control && control.valid;
-    });
-  }
-
   // Submit form
   onSubmit(): void {
-    if (this.isFormValid()) {
+    if (this.form.valid) {
       alert('Form submitted successfully!');
     }
   }
-
-  // Reset form
-  onReset(): void {
-    // Reset form values
-    this.form.reset();
-
-    // Clear touched fields
-    this.touchedFields.clear();
-
-    // Remove validation classes from all inputs
-    const inputs = document.querySelectorAll('ion-input');
-    inputs.forEach(input => {
-      input.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
-    });
-  }
 }

packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.html

@@ -127,7 +127,7 @@ <h2>Optional Notes</h2>
   </form>
 
   <div class="ion-padding">
-    <ion-button id="submit-btn" expand="block" [disabled]="!isFormValid()" (click)="onSubmit()">Submit Form</ion-button>
-    <ion-button id="reset-btn" expand="block" fill="outline" (click)="onReset()">Reset Form</ion-button>
+    <ion-button id="submit-btn" expand="block" [disabled]="form.invalid" (click)="onSubmit()">Submit Form</ion-button>
+    <ion-button id="reset-btn" expand="block" fill="outline" (click)="form.reset()">Reset Form</ion-button>
   </div>
 </ion-content>

packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss

@@ -13,14 +13,6 @@ h2 {
   margin-bottom: 5px;
 }
 
-.aria-live-region {
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
 .validation-info {
   margin: 20px;
   padding: 10px;

packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.ts

@@ -43,9 +43,6 @@ function addressValidator(control: AbstractControl): ValidationErrors | null {
   ]
 })
 export class TextareaValidationComponent {
-  // Track which fields have been touched (using Set like vanilla test)
-  touchedFields = new Set<string>();
-
   // Field metadata for labels and error messages
   fieldMetadata = {
     description: {
@@ -99,46 +96,10 @@ export class TextareaValidationComponent {
 
   constructor(private fb: FormBuilder) {}
 
-  // Check if a field is invalid
-  isInvalid(fieldName: string): boolean {
-    const control = this.form.get(fieldName);
-    return !!(control && control.invalid && control.touched);
-  }
-
-  // Check if a field is valid
-  isValid(fieldName: string): boolean {
-    const control = this.form.get(fieldName);
-    return !!(control && control.valid && control.touched);
-  }
-
-  // Check if form is valid (excluding optional field)
-  isFormValid(): boolean {
-    const requiredFields = ['description', 'comments', 'bio', 'address', 'review'];
-    return requiredFields.every(field => {
-      const control = this.form.get(field);
-      return control && control.valid;
-    });
-  }
-
   // Submit form
   onSubmit(): void {
-    if (this.isFormValid()) {
+    if (this.form.valid) {
       alert('Form submitted successfully!');
     }
   }
-
-  // Reset form
-  onReset(): void {
-    // Reset form values
-    this.form.reset();
-
-    // Clear touched fields
-    this.touchedFields.clear();
-
-    // Remove validation classes from all textareas
-    const textareas = document.querySelectorAll('ion-textarea');
-    textareas.forEach(textarea => {
-      textarea.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
-    });
-  }
 }