BaseGridEditorCVA

Base class for grid editors that also work as Angular form controls.

Combines BaseGridEditor with ControlValueAccessor so the same component can be used inside a <tbw-grid> and in a standalone <form>.

What it provides

Member	Purpose
cvaValue	Signal holding the value written by the form control
disabledState	Signal tracking setDisabledState calls
displayValue	Computed that prefers grid value (currentValue) and falls back to cvaValue
commitBoth(v)	Commits via both CVA onChange and grid commitValue
writeValue / registerOn* / setDisabledState	Full CVA implementation

Usage

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseGridEditorCVA } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-date-picker',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DatePickerComponent),
    multi: true,
  }],
  template: `
    <input
      type="date"
      [value]="displayValue()"
      [disabled]="disabledState()"
      (change)="commitBoth($event.target.value)"
      (keydown.escape)="cancelEdit()"
    />
  `
})
export class DatePickerComponent extends BaseGridEditorCVA<MyRow, string> {}

> Note: Subclasses must still provide NG_VALUE_ACCESSOR themselves > because forwardRef(() => ConcreteClass) must reference the concrete > component — this is an Angular limitation.

Properties

Property	Type	Description
cvaValue	WritableSignal<TValue | unknown>	Signal holding the value written by the form control via writeValue(). Updated when the form control pushes a new value (e.g. patchValue, setValue).
disabledState	WritableSignal<boolean>	Signal tracking the disabled state set by the form control. Updated when setDisabledState() is called by Angular’s forms module.
displayValue	Signal<TValue | unknown>	Resolved display value.

Methods

writeValue()

Called by Angular forms when the form control value changes programmatically.

writeValue(value: TValue | null): void

Parameters

Name	Type	Description
value	TValue | unknown

---

registerOnChange()

Called by Angular forms to register a change callback.

registerOnChange(fn: (value: TValue | null) => void): void

Parameters

Name	Type	Description
fn	(value: TValue | unknown) => void

---

registerOnTouched()

Called by Angular forms to register a touched callback.

registerOnTouched(fn: () => void): void

Parameters

Name	Type	Description
fn	() => void

---

setDisabledState()

Called by Angular forms to set the disabled state.

setDisabledState(isDisabled: boolean): void

Parameters

Name	Type	Description
isDisabled	boolean

---

commitBoth()

Commit a value through both the CVA (form control) and the grid.

• Calls the CVA onChange callback (updates the form control)
• Marks the control as touched
• Calls commitValue() (emits grid commit event + DOM CustomEvent)

Use this instead of commitValue() when your editor doubles as a form control.

commitBoth(value: TValue | null): void

Parameters

Name	Type	Description
value	TValue | unknown	The new value to commit

---