fix(form-check-input): checked prop overwrites checked from writeValue in ReactiveForms

Author: xidedix

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ---
 
+#### `5.4.8` next
+
+- fix(form-check-input): checked prop overwrites checked from writeValue in ReactiveForms
+
+---
+
 #### `5.4.7`
 
 - fix(avatar): default size should be '' not `md`

projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts

@@ -6,10 +6,10 @@ import {
   ElementRef,
   inject,
   input,
-  Renderer2,
-  signal,
-  untracked
+  linkedSignal,
+  Renderer2
 } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 @Directive({
   selector: 'input[cFormCheckInput]',
@@ -20,6 +20,8 @@ import {
   }
 })
 export class FormCheckInputDirective {
+  static ngAcceptInputType_indeterminate: BooleanInput;
+
   readonly #renderer = inject(Renderer2);
   readonly #hostElement = inject(ElementRef);
 
@@ -35,24 +37,23 @@ export class FormCheckInputDirective {
    */
   readonly indeterminateInput = input(false, { transform: booleanAttribute, alias: 'indeterminate' });
 
+  readonly #indeterminate = linkedSignal(this.indeterminateInput);
+
   readonly #indeterminateEffect = effect(() => {
-    const indeterminate = this.indeterminateInput();
-    if (untracked(this.#indeterminate) !== indeterminate) {
+    if (this.type() === 'checkbox') {
+      const indeterminate = this.#indeterminate();
       const htmlInputElement = this.#hostElement.nativeElement as HTMLInputElement;
       if (indeterminate) {
         this.#renderer.setProperty(htmlInputElement, 'checked', false);
       }
       this.#renderer.setProperty(htmlInputElement, 'indeterminate', indeterminate);
-      this.#indeterminate.set(indeterminate);
     }
   });
 
   get indeterminate() {
     return this.#indeterminate();
   }
 
-  readonly #indeterminate = signal(false);
-
   /**
    * Set component validation state to valid.
    * @default undefined
@@ -68,20 +69,6 @@ export class FormCheckInputDirective {
     } as Record<string, boolean>;
   });
 
-  /**
-   * Set component checked state.
-   * @default false
-   */
-  readonly checkedInput = input(false, { transform: booleanAttribute, alias: 'checked' });
-
-  readonly #checkedEffect = effect(() => {
-    const checked = this.checkedInput();
-    const htmlInputElement = this.#hostElement?.nativeElement as HTMLInputElement;
-    if (htmlInputElement) {
-      this.#renderer.setProperty(htmlInputElement, 'checked', checked);
-    }
-  });
-
   get checked(): boolean {
     return this.#hostElement?.nativeElement?.checked;
   }

projects/coreui-angular/src/lib/form/form-check/form-check.component.ts

@@ -1,5 +1,5 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, Component, computed, contentChild, input } from '@angular/core';
-
 import { FormCheckLabelDirective } from './form-check-label.directive';
 
 @Component({
@@ -9,6 +9,10 @@ import { FormCheckLabelDirective } from './form-check-label.directive';
   host: { '[class]': 'hostClasses()' }
 })
 export class FormCheckComponent {
+  static ngAcceptInputType_inline: BooleanInput;
+  static ngAcceptInputType_reverse: BooleanInput;
+  static ngAcceptInputType_switch: BooleanInput;
+
   /**
    * Group checkboxes or radios on the same horizontal row.
    * @default false
@@ -30,15 +34,13 @@ export class FormCheckComponent {
 
   /**
    * Render a toggle switch on for checkbox.
-   * @type boolean
+   * @returns boolean
    * @default false
    */
   readonly switch = input(false, { transform: booleanAttribute });
 
   readonly formCheckLabel = contentChild(FormCheckLabelDirective);
 
-  readonly formCheckClass = computed(() => !!this.formCheckLabel());
-
   readonly hostClasses = computed(() => {
     const sizing = this.sizing();
     const isSwitch = this.switch();