Skip to content

Commit 166b3b1

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 98711d7 commit 166b3b1

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
@@ -874,7 +874,7 @@ describe('MatCheckbox', () => {
874874
let inputElement: HTMLInputElement;
875875
let ngModel: NgModel;
876876

877-
beforeEach(() => {
877+
beforeEach(fakeAsync(() => {
878878
fixture = createComponent(CheckboxWithNgModel);
879879

880880
fixture.componentInstance.isRequired = false;
@@ -885,7 +885,7 @@ describe('MatCheckbox', () => {
885885
checkboxInstance = checkboxDebugElement.componentInstance;
886886
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
887887
ngModel = checkboxDebugElement.injector.get<NgModel>(NgModel);
888-
});
888+
}));
889889

890890
it('should be pristine, untouched, and valid initially', () => {
891891
expect(ngModel.valid).toBe(true);
@@ -959,6 +959,18 @@ describe('MatCheckbox', () => {
959959
expect(checkboxInstance.checked).toBe(false);
960960
expect(ngModel.valid).toBe(false);
961961
});
962+
963+
it('should updated the ngModel value when using the `toggle` method', fakeAsync(() => {
964+
const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).componentInstance;
965+
966+
expect(fixture.componentInstance.isGood).toBe(false);
967+
968+
checkbox.toggle();
969+
fixture.detectChanges();
970+
971+
expect(fixture.componentInstance.isGood).toBe(true);
972+
}));
973+
962974
});
963975

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

src/lib/checkbox/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
357357
/** Toggles the `checked` state of the checkbox. */
358358
toggle(): void {
359359
this.checked = !this.checked;
360+
this._controlValueAccessorChangeFn(this.checked);
360361
}
361362

362363
/**

0 commit comments

Comments
 (0)