Skip to content

Commit ba4fe2f

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 c276e26 commit ba4fe2f

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
@@ -877,15 +877,15 @@ describe('MatCheckbox', () => {
877877
let checkboxInstance: MatCheckbox;
878878
let inputElement: HTMLInputElement;
879879

880-
beforeEach(() => {
880+
beforeEach(fakeAsync(() => {
881881
fixture = TestBed.createComponent(CheckboxWithFormDirectives);
882882
fixture.detectChanges();
883883

884884
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
885885
checkboxNativeElement = checkboxDebugElement.nativeElement;
886886
checkboxInstance = checkboxDebugElement.componentInstance;
887887
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
888-
});
888+
}));
889889

890890
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
891891
flush();
@@ -914,6 +914,17 @@ describe('MatCheckbox', () => {
914914

915915
expect(checkboxInstance.checked).toBe(false);
916916
});
917+
918+
it('should updated the ngModel value when using the `toggle` method', fakeAsync(() => {
919+
const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).componentInstance;
920+
921+
expect(fixture.componentInstance.isGood).toBe(false);
922+
923+
checkbox.toggle();
924+
fixture.detectChanges();
925+
926+
expect(fixture.componentInstance.isGood).toBe(true);
927+
}));
917928
});
918929

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

src/lib/checkbox/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
337337
/** Toggles the `checked` state of the checkbox. */
338338
toggle(): void {
339339
this.checked = !this.checked;
340+
this._controlValueAccessorChangeFn(this.checked);
340341
}
341342

342343
/**

0 commit comments

Comments
 (0)