# GridFormArray

> _Since v0.5.0_

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

```typescript
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

#### Example

```html
<form [formGroup]="form">
  <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
</form>
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `formArray` | <code>InputSignal&lt;FormArray&lt;any&gt;&gt;</code> | The FormArray to bind to the grid. |
| `syncValidation` | <code>InputSignal&lt;boolean&gt;</code> | 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.

```ts
ngOnInit(): void
```

***

### ngOnDestroy()

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

```ts
ngOnDestroy(): void
```

***