# EuiTreeFormControlDirective

**Type:** directive



Form control directive that integrates eui-tree with Angular reactive and template-driven forms.
Implements ControlValueAccessor to enable two-way binding and form validation for tree selections.
Provides customizable value transformation functions for mapping between form model and tree selection.
Automatically synchronizes tree selection state with form control value.
Must be applied to eui-tree component to enable form integration.

### Basic Usage with Reactive Forms
```html
<form [formGroup]="myForm">
  <eui-tree
    euiTreeFormControl
    formControlName="selectedNodes"
    [nodes]="treeData"
    [isMultiselect]="true">
  </eui-tree>
</form>
```

```typescript
myForm = this.fb.group({
  selectedNodes: [[]]
});

ngOnInit() {
  // Set initial selection
  this.myForm.patchValue({
    selectedNodes: [{ id: '1', label: 'Node 1' }]
  });
}
```

### With Custom Value Mapping
```html
<eui-tree
  euiTreeFormControl
  formControlName="nodeIds"
  [nodes]="treeData"
  [euiTreeControlValueSetter]="valueSetter"
  [euiTreeControlModelMapper]="modelMapper"
  [isMultiselect]="true">
</eui-tree>
```

```typescript
// Extract only IDs for form value
valueSetter = (selection: TreeDataModel) => {
  return selection.map(item => item.node.treeContentBlock.id);
};

// Map IDs back to tree items
modelMapper = (ids: string[], tree: TreeDataModel) => {
  return new EuiTreeHelper(tree).getItems(ids, 'node.treeContentBlock.id');
};
```

### Accessibility
- Form validation states properly announced
- Error messages associated with tree control
- Required field indication supported

### Notes
- Works with both reactive and template-driven forms
- Default value setter extracts full tree items
- Custom mappers allow flexible data transformation
- Supports form validation and dirty state tracking
- Selection changes automatically update form value


**Selector:** `eui-tree[euiTreeFormControl]`

## Inputs
- **euiTreeControlModelMapper**: `function` - Custom function to transform form control value into tree selection items. Receives form control value and tree data, returns array of TreeItemModel to be selected. Default implementation passes through the value unchanged.
- **euiTreeControlValueSetter**: `function` - Custom function to transform tree selection into form control value. Receives current selection and returns the value to be written to the form control. Default implementation extracts node IDs from selected items.