From c28ad92637d6b5d62bc7011ee9aec6e42debf390 Mon Sep 17 00:00:00 2001
From: jabali2004 <32802935+jabali2004@users.noreply.github.com>
Date: Sat, 18 Dec 2021 23:41:17 +0000
Subject: [PATCH] fix: wrong radio / checkbox behavior

---
 .../checkbox-control/checkbox-control.component.html       | 7 ++++---
 .../checkbox-control/checkbox-control.component.ts         | 7 +++++++
 .../controls/radio-control/radio-control.component.html    | 7 ++++---
 .../controls/radio-control/radio-control.component.ts      | 7 +++++++
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.html b/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.html
index 7c44a34..3cfde6e 100644
--- a/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.html
+++ b/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.html
@@ -1,8 +1,9 @@
 <div class="form-control h-auto" *ngIf="dynamicControl">
   <label class="mr-2" [for]="dynamicControl.formControlName"
     *ngIf="dynamicControl.label">{{ dynamicControl.label }}</label>
-  <input [ngClass]="{'fullWidth': dynamicControl.fullWidth}" [id]="dynamicControl.formControlName"
-    [type]="dynamicControl.type || 'checkbox'" [formControl]="dynamicControl.formControl"
-    *ngIf="dynamicControl.formControl" [checked]="dynamicControl.formControl.value" [attr.disabled]="dynamicControl.disabled ? '' :
+  <input (change)="onChange($event)" [ngClass]="{'fullWidth': dynamicControl.fullWidth}"
+    [id]="dynamicControl.formControlName" [type]="dynamicControl.type || 'checkbox'"
+    [formControl]="dynamicControl.formControl" *ngIf="dynamicControl.formControl"
+    [attr.checked]="dynamicControl.formControl.value ? '' : null" [attr.disabled]="dynamicControl.disabled ? '' :
     null">
 </div>
diff --git a/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.ts b/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.ts
index c45f473..22b28bc 100644
--- a/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.ts
+++ b/projects/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.ts
@@ -12,4 +12,11 @@ export class CheckboxControlComponent extends BaseControlComponent {
   }
 
   ngOnInit(): void {}
+
+  public onChange($event: Event): void {
+    if ($event) {
+      const target = $event.target as HTMLInputElement;
+      this.dynamicControl.formControl.setValue(target.checked);
+    }
+  }
 }
diff --git a/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.html b/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.html
index a2e0e96..bec8471 100644
--- a/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.html
+++ b/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.html
@@ -1,8 +1,9 @@
 <div class="form-control h-auto" *ngIf="dynamicControl">
   <label class="mr-2" [for]="dynamicControl.formControlName"
     *ngIf="dynamicControl.label">{{ dynamicControl.label }}</label>
-  <input [ngClass]="{'fullWidth': dynamicControl.fullWidth}" [id]="dynamicControl.formControlName"
-    [type]="dynamicControl.type || 'radio'" [formControl]="dynamicControl.formControl"
-    *ngIf="dynamicControl.formControl" [checked]="dynamicControl.formControl.value" [attr.disabled]="dynamicControl.disabled ? '' :
+  <input (change)="onChange($event)" [ngClass]="{'fullWidth': dynamicControl.fullWidth}"
+    [id]="dynamicControl.formControlName" [type]="dynamicControl.type || 'radio'"
+    [formControl]="dynamicControl.formControl" *ngIf="dynamicControl.formControl"
+    [attr.checked]="dynamicControl.formControl.value ? '' : null" [attr.disabled]="dynamicControl.disabled ? '' :
     null">
 </div>
diff --git a/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.ts b/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.ts
index 3a12e63..5b3441e 100644
--- a/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.ts
+++ b/projects/ngx-formulus/src/lib/components/controls/radio-control/radio-control.component.ts
@@ -12,4 +12,11 @@ export class RadioControlComponent extends BaseControlComponent {
   }
 
   ngOnInit(): void {}
+
+  public onChange($event: Event): void {
+    if ($event) {
+      const target = $event.target as HTMLInputElement;
+      this.dynamicControl.formControl.setValue(target.checked);
+    }
+  }
 }