From 73b086dfe8da7460a0344b1647c47697b03562ed Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 1 Oct 2019 22:07:40 +0200 Subject: [PATCH] fix(material-experimental/checkbox): model value not updated through toggle method (#17229) Along the same lines as #11902. When the value of an experimental checkbox is changed through the `toggle` method it wasn't being propagated to the `ControlValueAccessor`. (cherry picked from commit f178f20a7b31185681ef82d9afda7962322ca935) --- .../mdc-checkbox/checkbox.spec.ts | 11 +++++++++++ src/material-experimental/mdc-checkbox/checkbox.ts | 1 + 2 files changed, 12 insertions(+) diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts index f009b1a5f8bc..f7c695aa0fb0 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.spec.ts @@ -852,6 +852,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-experimental/mdc-checkbox/checkbox.ts b/src/material-experimental/mdc-checkbox/checkbox.ts index e4e0cdd1df7a..42caf4336ddd 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.ts @@ -285,6 +285,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess /** Toggles the `checked` state of the checkbox. */ toggle() { this.checked = !this.checked; + this._cvaOnChange(this.checked); } /** Handles blur events on the native input. */