test(angular): add textarea to lazy forms test

Author: brandyscarney

packages/angular/test/base/e2e/src/lazy/form.spec.ts

@@ -31,6 +31,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: false,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -47,6 +49,9 @@ test.describe('Form', () => {
       await page.locator('ion-input.required input').fill('Some value');
       await page.locator('ion-input.required input').blur();
 
+      await page.locator('ion-textarea.required textarea').fill('Some value');
+      await page.locator('ion-textarea.required textarea').blur();
+
       // Test number OTP input
       await page.locator('#touched-input-otp-number-test input').nth(0).fill('5');
       await page.locator('#touched-input-otp-number-test input').nth(1).fill('6');
@@ -78,6 +83,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: 'nes',
         toggle: false,
+        textarea: 'Some value',
+        textarea2: 'Default Value',
         input: 'Some value',
         input2: 'Default Value',
         inputMin: 1,
@@ -96,6 +103,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: true,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -114,6 +123,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: false,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -132,6 +143,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: false,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -165,6 +178,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: false,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -232,6 +247,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: true,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,
@@ -247,6 +264,8 @@ test.describe('Form', () => {
         datetime: '2010-08-20',
         select: null,
         toggle: true,
+        textarea: '',
+        textarea2: 'Default Value',
         input: '',
         input2: 'Default Value',
         inputMin: 1,

packages/angular/test/base/src/app/lazy/form/form.component.html

@@ -29,6 +29,21 @@
         <ion-toggle formControlName="toggle"> Toggle </ion-toggle>
       </ion-item>
 
+      <ion-item>
+        <ion-textarea
+          label="Textarea (required)"
+          formControlName="textarea"
+          class="required"
+          id="touched-textarea-test"
+        ></ion-textarea>
+      </ion-item>
+
+      <ion-button id="textarea-touched" (click)="setTextareaTouched()">Set Textarea Touched</ion-button>
+
+      <ion-item>
+        <ion-input label="Textarea" formControlName="textarea2"></ion-input>
+      </ion-item>
+
       <ion-item>
         <ion-input
           label="Input (required)"
@@ -38,7 +53,7 @@
         ></ion-input>
       </ion-item>
 
-      <ion-button id="input-touched" (click)="setTouched()">Set Input Touched</ion-button>
+      <ion-button id="input-touched" (click)="setInputTouched()">Set Input Touched</ion-button>
 
       <ion-item>
         <ion-input label="Input" formControlName="input2"></ion-input>

packages/angular/test/base/src/app/lazy/form/form.component.ts

@@ -26,6 +26,8 @@ export class FormComponent {
       datetime: ['2010-08-20', Validators.required],
       select: [undefined, Validators.required],
       toggle: [false],
+      textarea: ['', Validators.required],
+      textarea2: ['Default Value'],
       input: ['', Validators.required],
       input2: ['Default Value'],
       inputOtp: [null, [Validators.required, otpRequiredLength(4)]],
@@ -40,13 +42,20 @@ export class FormComponent {
     });
   }
 
-  setTouched() {
+  setInputTouched() {
     const formControl = this.profileForm.get('input');
     if (formControl) {
       formControl.markAsTouched();
     }
   }
 
+  setTextareaTouched() {
+    const formControl = this.profileForm.get('textarea');
+    if (formControl) {
+      formControl.markAsTouched();
+    }
+  }
+
   setOtpTouched() {
     const formControl = this.profileForm.get('inputOtp');
     if (formControl) {
@@ -63,6 +72,8 @@ export class FormComponent {
       datetime: '2010-08-20',
       select: 'nes',
       toggle: true,
+      textarea: 'Some value',
+      textarea2: 'Another values',
       input: 'Some value',
       input2: 'Another values',
       inputOtp: 5678,