diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index 4ce92570338d..4e2db7b7b03b 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -950,7 +950,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; let ngModel: NgModel; - beforeEach(() => { + beforeEach(fakeAsync(() => { fixture = createComponent(CheckboxWithNgModel); fixture.componentInstance.isRequired = false; @@ -961,7 +961,7 @@ describe('MatCheckbox', () => { checkboxInstance = checkboxDebugElement.componentInstance; inputElement = checkboxNativeElement.querySelector('input'); ngModel = checkboxDebugElement.injector.get(NgModel); - }); + })); it('should be pristine, untouched, and valid initially', () => { expect(ngModel.valid).toBe(true); @@ -1059,6 +1059,17 @@ describe('MatCheckbox', () => { expect(checkboxInstance.checked).toBe(false); expect(ngModel.valid).toBe(false); }); + + it('should update the ngModel value when using the `toggle` method', fakeAsync(() => { + const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).componentInstance; + + expect(fixture.componentInstance.isGood).toBe(false); + + checkbox.toggle(); + fixture.detectChanges(); + + expect(fixture.componentInstance.isGood).toBe(true); + })); }); describe('with name attribute', () => { diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts index 1277429d604c..f9a7d5031848 100644 --- a/src/material/checkbox/checkbox.ts +++ b/src/material/checkbox/checkbox.ts @@ -406,6 +406,7 @@ export class MatCheckbox /** Toggles the `checked` state of the checkbox. */ toggle(): void { this.checked = !this.checked; + this._controlValueAccessorChangeFn(this.checked); } /** @@ -437,7 +438,7 @@ export class MatCheckbox }); } - this.toggle(); + this._checked = !this._checked; this._transitionCheckState( this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked, );