Feat/checkbox control value accessor (#1432)

* feat(checkbox): add control value accessor implementation

* test(checkbox): add supporting test cases for control value accessor

* feat(checkbox): fix lint issue

* fix(checkbox): type coercion fix

* feat(checkbox): add change detection

* fix(checkbox): add checked getter

* fix(checkbox): add disabled getter

* fix(checkbox): fix linting issue

Author: adisreyaj

projects/components/src/checkbox/checkbox.component.test.ts

@@ -1,4 +1,5 @@
 import { fakeAsync } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { CheckboxComponent } from './checkbox.component';
@@ -9,7 +10,7 @@ describe('Checkbox component', () => {
 
   const createHost = createHostFactory({
     component: CheckboxComponent,
-    imports: [TraceCheckboxModule, RouterTestingModule],
+    imports: [TraceCheckboxModule, RouterTestingModule, ReactiveFormsModule],
     providers: [],
     declareComponent: false
   });
@@ -52,12 +53,32 @@ describe('Checkbox component', () => {
 
     // Click will toggle the values to true
     spectator.click(inputElement);
-    expect(spectator.component.checked).toBe(true);
+    expect(spectator.component.isChecked).toBe(true);
     expect(checkboxChangeSpy).toHaveBeenCalledWith(true);
 
     // Click will toggle the values to false
     spectator.click(inputElement);
-    expect(spectator.component.checked).toBe(false);
+    expect(spectator.component.isChecked).toBe(false);
     expect(checkboxChangeSpy).toHaveBeenCalledWith(false);
   }));
+
+  test('should work correctly with control value accessor', () => {
+    const formControl = new FormControl(false);
+    spectator = createHost(
+      `<ht-checkbox [label]="label" [formControl]="formControl">
+    </ht-checkbox>`,
+      {
+        hostProps: {
+          formControl: formControl
+        }
+      }
+    );
+    expect(spectator.component.isChecked).toBe(false);
+
+    formControl.setValue(true);
+    expect(spectator.component.isChecked).toBe(true);
+
+    formControl.disable();
+    expect(spectator.component.isDisabled).toBe(true);
+  });
 });

projects/components/src/checkbox/checkbox.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
@@ -8,31 +9,78 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
   template: `
     <mat-checkbox
       labelPosition="after"
-      [checked]="this.checked"
-      [disabled]="this.disabled"
-      (change)="onCheckboxChange($event)"
+      [checked]="this.isChecked"
+      [disabled]="this.isDisabled"
+      (change)="this.onCheckboxChange($event)"
       class="ht-checkbox"
-      [ngClass]="{ disabled: this.disabled }"
+      [ngClass]="{ disabled: this.isDisabled }"
     >
       <ht-label class="label" *ngIf="this.label !== undefined && this.label !== ''" [label]="this.label"></ht-label>
     </mat-checkbox>
-  `
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CheckboxComponent,
+      multi: true
+    }
+  ]
 })
-export class CheckboxComponent {
+export class CheckboxComponent implements ControlValueAccessor {
   @Input()
   public label?: string;
 
   @Input()
-  public checked: boolean | undefined;
+  public set checked(checked: boolean | undefined) {
+    this.isChecked = checked ?? false;
+  }
+
+  public get checked(): boolean {
+    return this.isChecked;
+  }
 
   @Input()
-  public disabled: boolean | undefined;
+  public set disabled(disabled: boolean | undefined) {
+    this.isDisabled = disabled ?? false;
+  }
+
+  public get disabled(): boolean {
+    return this.isDisabled;
+  }
 
   @Output()
   public readonly checkedChange: EventEmitter<boolean> = new EventEmitter();
 
+  public isChecked: boolean = false;
+  public isDisabled: boolean = false;
+
+  private onTouched!: () => void;
+  private onChanged!: (value: boolean) => void;
+
+  public constructor(private readonly cdr: ChangeDetectorRef) {}
+
   public onCheckboxChange(event: MatCheckboxChange): void {
-    this.checked = event.checked;
-    this.checkedChange.emit(this.checked);
+    this.isChecked = event.checked;
+    this.checkedChange.emit(this.isChecked);
+    this.onChanged(this.isChecked);
+    this.onTouched();
+  }
+
+  public registerOnChange(fn: (value: boolean) => void): void {
+    this.onChanged = fn;
+  }
+
+  public registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  public writeValue(isChecked: boolean | undefined): void {
+    this.isChecked = isChecked ?? false;
+    this.cdr.markForCheck();
   }
 }