BaseGridEditorCVA

Since v0.13.0

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 the last commitBoth value, then the grid value (currentValue), then 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/features/editing';

@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.

Property Details

displayValue

Resolved display value.

Prefers a value committed by this editor (see commitBoth), then currentValue() (grid context — from control.value or value input), and falls back to cvaValue() (standalone form context — from writeValue).

Use this in your template instead of reading currentValue() directly so the component works in both grid and standalone form contexts.

---

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

---

onExternalValueChange()

Discards the value committed by this editor so a genuinely external value (cascade, undo/redo, cell cancel) wins.

Subclasses that override this must call super.onExternalValueChange().

onExternalValueChange(newVal: TValue): void

Parameters

Name	Type	Description
newVal	TValue

---

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

---