### File

`packages/components/eui-tree/eui-tree-form-control.directive.ts`

### Description

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

Example :

    <form [formGroup]="myForm">
      <eui-tree
        euiTreeFormControl
        formControlName="selectedNodes"
        [nodes]="treeData"
        [isMultiselect]="true">
      </eui-tree>
    </form>

Example :

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

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

### With Custom Value Mapping

Example :

    <eui-tree
      euiTreeFormControl
      formControlName="nodeIds"
      [nodes]="treeData"
      [euiTreeControlValueSetter]="valueSetter"
      [euiTreeControlModelMapper]="modelMapper"
      [isMultiselect]="true">
    </eui-tree>

Example :

    // 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

### Implements

`ControlValueAccessor` `AfterContentInit`

### Metadata

Providers | `)`
Selector | `eui-tree[euiTreeFormControl]`

### Index

###### Methods

- registerOnChange
- registerOnTouched
- writeValue

###### Inputs

- euiTreeControlModelMapper
- euiTreeControlValueSetter

### Inputs

euiTreeControlModelMapper
Type : `function`
Default value : `(model: Array<TreeItemModel>) => { return model; }`
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
Type : `function`
Default value : `(selection: TreeDataModel) => { return new EuiTreeHelper(this.tree.nodes).getItems(selection.map(item=>item.node.treeContentBlock.id), 'node.treeContentBlock.id'); }`
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.

### Methods

registerOnChange
`registerOnChange(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

writeValue
`writeValue(value: any)`

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

# results matching ""

# No results matching ""