Skip to content

Commit 62b9ef7

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 444fb38 commit 62b9ef7

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

src/lib/checkbox/checkbox.spec.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -874,15 +874,15 @@ describe('MatCheckbox', () => {
874874
let checkboxInstance: MatCheckbox;
875875
let inputElement: HTMLInputElement;
876876

877-
beforeEach(() => {
877+
beforeEach(fakeAsync(() => {
878878
fixture = createComponent(CheckboxWithFormDirectives);
879879
fixture.detectChanges();
880880

881881
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
882882
checkboxNativeElement = checkboxDebugElement.nativeElement;
883883
checkboxInstance = checkboxDebugElement.componentInstance;
884884
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
885-
});
885+
}));
886886

887887
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
888888
flush();
@@ -911,6 +911,17 @@ describe('MatCheckbox', () => {
911911

912912
expect(checkboxInstance.checked).toBe(false);
913913
});
914+
915+
it('should updated the ngModel value when using the `toggle` method', fakeAsync(() => {
916+
const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).componentInstance;
917+
918+
expect(fixture.componentInstance.isGood).toBe(false);
919+
920+
checkbox.toggle();
921+
fixture.detectChanges();
922+
923+
expect(fixture.componentInstance.isGood).toBe(true);
924+
}));
914925
});
915926

916927
describe('with required ngModel', () => {

src/lib/checkbox/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
348348
/** Toggles the `checked` state of the checkbox. */
349349
toggle(): void {
350350
this.checked = !this.checked;
351+
this._controlValueAccessorChangeFn(this.checked);
351352
}
352353

353354
/**

0 commit comments

Comments
 (0)