fix(checkbox): not marked as touched immediately on blur with OnPush change detection (#15001)

Fixes a checkbox which is blurred inside a component with `OnPush` change detection not being marked as touched.

Fixes #14980.

Author: crisbeto

src/lib/checkbox/checkbox.spec.ts

@@ -6,7 +6,7 @@ import {
   flushMicrotasks,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
-import {Component, DebugElement, ViewChild, Type} from '@angular/core';
+import {Component, DebugElement, ViewChild, Type, ChangeDetectionStrategy} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
@@ -689,7 +689,7 @@ describe('MatCheckbox', () => {
     }));
   });
 
-  describe('aria-label ', () => {
+  describe('aria-label', () => {
     let checkboxDebugElement: DebugElement;
     let checkboxNativeElement: HTMLElement;
     let inputElement: HTMLInputElement;
@@ -916,6 +916,31 @@ describe('MatCheckbox', () => {
       expect(ngModel.touched).toBe(true);
     }));
 
+    it('should mark the element as touched on blur when inside an OnPush parent', fakeAsync(() => {
+      fixture.destroy();
+      TestBed.resetTestingModule();
+      fixture = createComponent(CheckboxWithNgModelAndOnPush);
+      checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
+      checkboxNativeElement = checkboxDebugElement.nativeElement;
+      checkboxInstance = checkboxDebugElement.componentInstance;
+      inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+      ngModel = checkboxDebugElement.injector.get<NgModel>(NgModel);
+
+      inputElement.click();
+      fixture.detectChanges();
+      flush();
+
+      expect(checkboxNativeElement.classList).not.toContain('ng-touched');
+
+      dispatchFakeEvent(inputElement, 'blur');
+      fixture.detectChanges();
+      flushMicrotasks();
+      fixture.detectChanges();
+
+      expect(checkboxNativeElement.classList).toContain('ng-touched');
+    }));
+
+
     it('should not throw an error when disabling while focused', fakeAsync(() => {
       expect(() => {
         // Focus the input element because after disabling, the `blur` event should automatically
@@ -1176,6 +1201,12 @@ class CheckboxWithNgModel {
   isRequired: boolean = true;
 }
 
+@Component({
+  template: `<mat-checkbox [required]="isRequired" [(ngModel)]="isGood">Be good</mat-checkbox>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class CheckboxWithNgModelAndOnPush extends CheckboxWithNgModel {}
+
 /** Simple test component with multiple checkboxes. */
 @Component(({
   template: `

src/lib/checkbox/checkbox.ts

@@ -212,7 +212,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
         // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
         // See https://github.com/angular/angular/issues/17793. To work around this, we defer
         // telling the form control it has been touched until the next tick.
-        Promise.resolve().then(() => this._onTouched());
+        Promise.resolve().then(() => {
+          this._onTouched();
+          _changeDetectorRef.markForCheck();
+        });
       }
     });
   }