GridFormArray

Directive that binds a FormArray directly to the grid.

This is the recommended way to integrate tbw-grid with Angular Reactive Forms. Use a FormArray of FormGroups for row-level validation and cell-level control access.

Usage

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { Grid, GridFormArray } from '@toolbox-web/grid-angular';

@Component({
  imports: [Grid, GridFormArray, ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
    </form>
  `
})
export class MyComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    rows: this.fb.array([
      this.fb.group({ name: 'Alice', age: 30 }),
      this.fb.group({ name: 'Bob', age: 25 }),
    ])
  });

  columns = [
    { field: 'name', header: 'Name', editable: true },
    { field: 'age', header: 'Age', editable: true }
  ];
}

How It Works

• FormArray → Grid: The grid displays the FormArray’s value as rows
• Grid → FormArray: When a cell is edited, the corresponding FormControl is updated
• FormArrayContext is available for accessing cell-level controls

Features

• Works naturally with FormArray inside a FormGroup
• Provides cell-level FormControl access for validation
• Supports row-level validation state aggregation
• Automatically syncs FormArray changes to the grid

Properties

Property	Type	Description
formArray	InputSignal<FormArray<any>>	The FormArray to bind to the grid.
syncValidation	InputSignal<boolean>	Whether to automatically sync Angular validation state to grid’s visual invalid styling.

Property Details

syncValidation

Whether to automatically sync Angular validation state to grid’s visual invalid styling.

When enabled:

• After a cell commit, if the FormControl is invalid, the cell is marked with setInvalid()
• When a FormControl becomes valid, clearInvalid() is called
• On row-commit, if the row’s FormGroup has invalid controls, the commit is prevented
• In grid mode: validation state is synced on initial render and updated reactively

Default: true

---

Methods

ngOnInit()

A callback method that is invoked immediately after the default change detector has checked the directive’s data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

ngOnInit(): void

---

ngOnDestroy()

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

ngOnDestroy(): void

---