Skip to content

Commit d81826b

Browse files
committed
fix(checkbox): model value not updated when using toggle method
Along the same lines as #11812. The checkbox doesn't update its `ControlValueAccessor` value when it is toggled via the `toggle` method.
1 parent d392a8d commit d81826b

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/lib/checkbox/checkbox.spec.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -882,7 +882,7 @@ describe('MatCheckbox', () => {
882882
let inputElement: HTMLInputElement;
883883
let ngModel: NgModel;
884884

885-
beforeEach(() => {
885+
beforeEach(fakeAsync(() => {
886886
fixture = createComponent(CheckboxWithNgModel);
887887

888888
fixture.componentInstance.isRequired = false;
@@ -893,7 +893,7 @@ describe('MatCheckbox', () => {
893893
checkboxInstance = checkboxDebugElement.componentInstance;
894894
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
895895
ngModel = checkboxDebugElement.injector.get<NgModel>(NgModel);
896-
});
896+
}));
897897

898898
it('should be pristine, untouched, and valid initially', () => {
899899
expect(ngModel.valid).toBe(true);
@@ -967,6 +967,18 @@ describe('MatCheckbox', () => {
967967
expect(checkboxInstance.checked).toBe(false);
968968
expect(ngModel.valid).toBe(false);
969969
});
970+
971+
it('should updated the ngModel value when using the `toggle` method', fakeAsync(() => {
972+
const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).componentInstance;
973+
974+
expect(fixture.componentInstance.isGood).toBe(false);
975+
976+
checkbox.toggle();
977+
fixture.detectChanges();
978+
979+
expect(fixture.componentInstance.isGood).toBe(true);
980+
}));
981+
970982
});
971983

972984
describe('with name attribute', () => {

src/lib/checkbox/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
353353
/** Toggles the `checked` state of the checkbox. */
354354
toggle(): void {
355355
this.checked = !this.checked;
356+
this._controlValueAccessorChangeFn(this.checked);
356357
}
357358

358359
/**

0 commit comments

Comments
 (0)