fix: wrong radio / checkbox behavior

jabali2004 · Dec 18, 2021 · c28ad92 · c28ad92
1 parent f6d422b
commit c28ad92
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/...ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.html b/...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/...s/ngx-formulus/src/lib/components/controls/checkbox-control/checkbox-control.component.ts b/...s/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
@@ -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
@@ -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);
+    }
+  }
 }