[ADF-5143] Fix Checkbox widget value parsing (#5706)

lib/core/form/components/widgets/checkbox/checkbox.widget.html

@@ -5,8 +5,8 @@
         color="primary"
         [required]="field.required"
         [disabled]="field.readOnly || readOnly"
-        [(ngModel)]="checkboxValue"
+        [(ngModel)]="field.value"
-        (ngModelChange)="onCheckboxToggled()">
+        (ngModelChange)="onFieldChanged(field)">
         {{field.name | translate }}
         <span *ngIf="field.required">*</span>
     </mat-checkbox>

lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts

@@ -80,51 +80,16 @@ describe('CheckboxWidgetComponent', () => {
                 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(() => {
+        it('should not be checked if false 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,7 +17,7 @@
 
 /* tslint:disable:component-selector no-input-rename */
 
-import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
 import { baseHost, WidgetComponent } from './../widget.component';
 
@@ -27,23 +27,10 @@ import { baseHost, WidgetComponent } from './../widget.component';
     host: baseHost,
     encapsulation: ViewEncapsulation.None
 })
-export class CheckboxWidgetComponent extends WidgetComponent implements OnInit {
+export class CheckboxWidgetComponent extends WidgetComponent {
     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);
-    }
 }

lib/core/form/components/widgets/core/form-field.model.spec.ts

@@ -284,6 +284,30 @@ describe('FormFieldModel', () => {
         expect(field.value).toBe('deferred-radio');
     });
 
+    it('should parse boolean value when set to "true"', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.BOOLEAN,
+            value: 'true'
+        });
+        expect(field.value).toBe(true);
+    });
+
+    it('should parse boolean value when set to "false"', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.BOOLEAN,
+            value: 'false'
+        });
+        expect(field.value).toBe(false);
+    });
+
+    it('should parse boolean value to false when set to null', () => {
+        const field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.BOOLEAN,
+            value: null
+        });
+        expect(field.value).toBe(false);
+    });
+
     it('should update form with empty dropdown value', () => {
         const form = new FormModel();
         const field = new FormFieldModel(form, {

lib/core/form/components/widgets/core/form-field.model.ts

@@ -318,6 +318,10 @@ export class FormFieldModel extends FormWidgetModel {
             }
         }
 
+        if (json.type === FormFieldTypes.BOOLEAN) {
+            value = json.value === 'true' || json.value === true ? true : false;
+        }
+
         return value;
     }