[AAE-2487] Fix Checkbox Widget bug (#5657)

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"
+        [(ngModel)]="checkboxValue"
-        (ngModelChange)="onFieldChanged(field)">
+        (ngModelChange)="onCheckboxToggled()">
         {{field.name | translate }}
         <span *ngIf="field.required">*</span>
     </mat-checkbox>

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);
+            });
+        }));
    });
 });

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);
+    }
 }