From 273ae2cc087b2a5a30fb50a1b0eaeb0a221900fc Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 12 Jan 2022 14:48:01 -0500
Subject: [PATCH] fix(angular): apply touch, dirty and pristine form control
 classes (#24558)

Resolves #24483
---
 .../control-value-accessors/value-accessor.ts          |  2 +-
 angular/test/test-app/e2e/src/form.spec.ts             | 10 ++++++++++
 angular/test/test-app/src/app/form/form.component.html |  4 +++-
 angular/test/test-app/src/app/form/form.component.ts   |  4 ++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts
index c917955fd3..daa4a72685 100644
--- a/angular/src/directives/control-value-accessors/value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -96,7 +96,7 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
     if (formControl) {
       const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
       methodsToPatch.forEach((method) => {
-        if (formControl.get(method)) {
+        if (typeof formControl[method] !== 'undefined') {
           const oldFn = formControl[method].bind(formControl);
           formControl[method] = (...params: any[]) => {
             oldFn(...params);
diff --git a/angular/test/test-app/e2e/src/form.spec.ts b/angular/test/test-app/e2e/src/form.spec.ts
index 9c0f21d490..cc3fddbd54 100644
--- a/angular/test/test-app/e2e/src/form.spec.ts
+++ b/angular/test/test-app/e2e/src/form.spec.ts
@@ -8,6 +8,16 @@ describe('Form', () => {
       cy.get('#input-touched').click();
       cy.get('#touched-input-test').should('have.class', 'ion-touched');
     });
+
+    describe('markAllAsTouched', () => {
+      it('should apply .ion-touched to nearest ion-item', () => {
+        cy.get('#mark-all-touched-button').click();
+        cy.get('form ion-item').each(item => {
+          cy.wrap(item).should('have.class', 'ion-touched');
+        });
+      });
+    });
+
   });
 
   describe('change', () => {
diff --git a/angular/test/test-app/src/app/form/form.component.html b/angular/test/test-app/src/app/form/form.component.html
index 0de47dae90..34740df87f 100644
--- a/angular/test/test-app/src/app/form/form.component.html
+++ b/angular/test/test-app/src/app/form/form.component.html
@@ -12,7 +12,8 @@
 
       <ion-item>
         <ion-label>DateTime</ion-label>
-        <ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+        <ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY">
+        </ion-datetime>
       </ion-item>
 
       <ion-item>
@@ -65,6 +66,7 @@
     <p>
       Form Submit: <span id="submit">{{submitted}}</span>
     </p>
+    <ion-button id="mark-all-touched-button" (click)="markAllAsTouched()">Mark all as touched</ion-button>
     <ion-button id="submit-button" type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
 
   </form>
diff --git a/angular/test/test-app/src/app/form/form.component.ts b/angular/test/test-app/src/app/form/form.component.ts
index 6f9345330b..157bc9a1a8 100644
--- a/angular/test/test-app/src/app/form/form.component.ts
+++ b/angular/test/test-app/src/app/form/form.component.ts
@@ -46,4 +46,8 @@ export class FormComponent {
     });
   }
 
+  markAllAsTouched() {
+    this.profileForm.markAllAsTouched();
+  }
+
 }