diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/form/components/widgets/checkbox/checkbox.widget.html index 4c80eef031..9d00bf8b2e 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.html +++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.html @@ -5,8 +5,8 @@ color="primary" [required]="field.required" [disabled]="field.readOnly || readOnly" - [(ngModel)]="field.value" - (ngModelChange)="onFieldChanged(field)"> + [(ngModel)]="checkboxValue" + (ngModelChange)="onCheckboxToggled()"> {{field.name | translate }} * diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts b/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts index 050f66680a..b69d314072 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts +++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts @@ -25,6 +25,7 @@ import { FormBaseModule } from 'core/form/form-base.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { TranslateService, TranslateStore, TranslateLoader } from '@ngx-translate/core'; import { TranslateLoaderService } from 'core/services'; +import { MatCheckboxModule } from '@angular/material'; describe('CheckboxWidgetComponent', () => { @@ -35,7 +36,8 @@ describe('CheckboxWidgetComponent', () => { setupTestBed({ imports: [ NoopAnimationsModule, - FormBaseModule + FormBaseModule, + MatCheckboxModule ], providers: [ TranslateStore, @@ -62,13 +64,68 @@ describe('CheckboxWidgetComponent', () => { readOnly: false, required: true }); - fixture.detectChanges(); }); it('should be marked as invalid when required', async(() => { + fixture.detectChanges(); fixture.whenStable().then(() => { expect(element.querySelector('.adf-invalid')).not.toBeNull(); }); })); + + it('should be checked if boolean true is passed', async(() => { + widget.field.value = true; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input'); + expect(checkbox.getAttribute('aria-checked')).toBe('true'); + expect(widget.checkboxValue).toBe(true); + }); + })); + + it('should be checked if string "true" is passed', async(() => { + widget.field.value = 'true'; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input'); + expect(checkbox.getAttribute('aria-checked')).toBe('true'); + expect(widget.checkboxValue).toBe(true); + }); + })); + + it('should not be checked if boolean false is passed', async(() => { + widget.field.value = false; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input'); + expect(checkbox.getAttribute('aria-checked')).toBe('false'); + expect(widget.checkboxValue).toBe(false); + }); + })); + + it('should not be checked if string "false" is passed', async(() => { + widget.field.value = 'false'; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input'); + expect(checkbox.getAttribute('aria-checked')).toBe('false'); + expect(widget.checkboxValue).toBe(false); + }); + })); + + it('should not be checked if null is passed', async(() => { + widget.field.value = null; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input'); + expect(checkbox.getAttribute('aria-checked')).toBe('false'); + expect(widget.checkboxValue).toBe(false); + }); + })); }); }); diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.ts b/lib/core/form/components/widgets/checkbox/checkbox.widget.ts index 46dd9f5d9d..559f43fd19 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.ts +++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.ts @@ -17,9 +17,9 @@ /* tslint:disable:component-selector no-input-rename */ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, ViewEncapsulation, OnInit } from '@angular/core'; import { FormService } from './../../../services/form.service'; -import { baseHost , WidgetComponent } from './../widget.component'; +import { baseHost, WidgetComponent } from './../widget.component'; @Component({ selector: 'checkbox-widget', @@ -27,10 +27,23 @@ import { baseHost , WidgetComponent } from './../widget.component'; host: baseHost, encapsulation: ViewEncapsulation.None }) -export class CheckboxWidgetComponent extends WidgetComponent { +export class CheckboxWidgetComponent extends WidgetComponent implements OnInit { + checkboxValue: boolean; constructor(public formService: FormService) { super(formService); } + ngOnInit() { + this.checkboxValue = this.parseValue(this.field.value); + } + + parseValue(value: any) { + return value === true || value === 'true'; + } + + onCheckboxToggled() { + this.field.value = this.checkboxValue; + this.onFieldChanged(this.field); + } }