From 22acd3f6e69a6370a31961bf01395380829c6aad Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Thu, 14 May 2020 23:52:09 +0100 Subject: [PATCH] [ADF-5143] Fix Checkbox widget value parsing (#5706) --- .../widgets/checkbox/checkbox.widget.html | 4 +- .../widgets/checkbox/checkbox.widget.spec.ts | 37 +------------------ .../widgets/checkbox/checkbox.widget.ts | 17 +-------- .../widgets/core/form-field.model.spec.ts | 24 ++++++++++++ .../widgets/core/form-field.model.ts | 4 ++ 5 files changed, 33 insertions(+), 53 deletions(-) diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/form/components/widgets/checkbox/checkbox.widget.html index 9d00bf8b2e..4c80eef031 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)]="checkboxValue" - (ngModelChange)="onCheckboxToggled()"> + [(ngModel)]="field.value" + (ngModelChange)="onFieldChanged(field)"> {{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 b69d314072..f611b3abdf 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts +++ b/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(() => { - 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(() => { + it('should not be checked if 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 559f43fd19..e629dc6813 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.ts +++ b/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); - } } diff --git a/lib/core/form/components/widgets/core/form-field.model.spec.ts b/lib/core/form/components/widgets/core/form-field.model.spec.ts index 300941e754..ff5f0fc0f3 100644 --- a/lib/core/form/components/widgets/core/form-field.model.spec.ts +++ b/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, { diff --git a/lib/core/form/components/widgets/core/form-field.model.ts b/lib/core/form/components/widgets/core/form-field.model.ts index 6e19b993f7..199c656f6c 100644 --- a/lib/core/form/components/widgets/core/form-field.model.ts +++ b/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; }