fix(angular): patch FormControl methods to properly sync Ionic form classes (#21429)

Co-authored-by: Mark Levy <MarkChrisLevy@users.noreply.github.com>

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -1,5 +1,5 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
+import { handleErrorMessages, getProperty, setProperty, getText, waitTime } from './utils';
 
 describe('form', () => {
 
@@ -7,6 +7,20 @@ describe('form', () => {
     return handleErrorMessages();
   });
 
+  describe('status updates', () => {
+    beforeEach(async () => {
+      await browser.get('/form');
+      await waitTime(30);
+    });
+
+    it('should update Ionic form classes when calling form methods programatically', async () => {
+      await element(by.css('form #input-touched')).click();
+      await waitTime(100);
+      const classList = (await getProperty('#touched-input-test', 'classList')) as string[];
+      expect(classList.includes('ion-touched')).toEqual(true);
+    });
+  });
+
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');

angular/test/test-app/src/app/form/form.component.html

@@ -35,9 +35,11 @@
 
       <ion-item>
         <ion-label>Input (required)</ion-label>
-        <ion-input formControlName="input" class="required"></ion-input>
+        <ion-input formControlName="input" class="required" id="touched-input-test"></ion-input>
       </ion-item>
 
+      <ion-button id="input-touched" (click)="setTouched()">Set Input Touched</ion-button>
+
       <ion-item>
         <ion-label>Input</ion-label>
         <ion-input formControlName="input2"></ion-input>

angular/test/test-app/src/app/form/form.component.ts

@@ -25,6 +25,11 @@ export class FormComponent {
     });
   }
 
+  setTouched() {
+    const formControl = this.profileForm.get('input');
+    formControl.markAsTouched();
+  }
+
   onSubmit(_ev) {
     this.submitted = 'true';
   }