fix(angular): apply touch, dirty and pristine form control classes (#…

…24558) Resolves #24483
ionic-team · Jan 12, 2022 · 273ae2c · 273ae2c
1 parent 9a15753
commit 273ae2c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -46,4 +46,8 @@ export class FormComponent {
     });
   }
 
+  markAllAsTouched() {
+    this.profileForm.markAllAsTouched();
+  }
+
 }