eui documentation
  1. Directives
  2. EuiTreeFormControlDirective

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
Inputs

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