# Forms Support

You can use the MultiSelectTree in template-driven or reactive forms, and within a `FormField`.

The component accepts values of the complex (objects) or the primitive (strings, numbers, or other) type. To specify the value type, set the [`valuePrimitive`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#valueprimitive) property. By default, it is set to `false`.

## Template-Driven Forms

The template-driven forms enable you to bind the MultiSelectTree to the model by using the [`ngModel`](https://angular.dev/guide/forms) directive.

To preselect items, set the initial value of the bound model field. With primitive values, also set [`dataItems`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#dataitems) to the selected data objects, one for each value in the same order.

The following example demonstrates how to accomplish a two-way data binding when the model field is a complex value.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/complex/source.txt)

The following example demonstrates how to accomplish a two-way data binding when the model field is a primitive value.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/primitive/source.txt)

## Reactive Forms

The `FormGroup` provides a way to render reactive forms. For more details, refer to the [Angular Documentation](https://angular.dev/guide/forms/reactive-forms).

The following example demonstrates how to use the MultiSelectTree in a reactive form with a primitive value binding.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/reactive_primitive/source.txt)

The following example demonstrates how to use the MultiSelectTree in a reactive form with complex value binding.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/reactive_complex/source.txt)

To preselect items, set the initial value of the form control. To change the selection programmatically, call the `setValue` method of the control. With primitive values, also update [`dataItems`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#dataitems) with the selected data objects, one for each value in the same order, because the `dataItems` contain only the selected objects and not the complete hierarchy.

The following example demonstrates how to preselect an item and update the selection through `setValue`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/reactive_programmatic_selection/source.txt)

## Managing the MultiSelectTree Disabled State in Reactive Forms

To disable the MultiSelectTree component when working with reactive forms and Angular 15 or later, use the FormControl's [`disabled` property/option](https://angular.io/api/forms/AbstractControl#disabled) or [`disable()` method](https://angular.io/api/forms/AbstractControl#disable).

> Angular 15 introduces a [breaking change](https://github.com/angular/angular/pull/47576) affecting the synchronization of [`setDisabledState`](https://angular.io/api/forms/ControlValueAccessor#setDisabledState) with the model-DOM. This impacts components using the [`disabled` attribute](https://angular.io/api/forms/AbstractControl#disabled). As a result, the [`disabled`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#disabled) property of the Kendo UI for Angular components used prior to Angular 15 is no longer working in reactive forms.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/forms/reactive-forms-disabled/source.txt)

## FormField Association

The [Kendo UI for Angular FormField component](https://www.telerik.com/kendo-angular-ui/components/inputs/form/formfield) enables you to group form-related elements, such as inputs, labels, hint and error messages, and configure their behavior.

The following example demonstrates how to use the MultiSelectTree within a FormField with hint and error messages.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/formfield/source.txt)

## Suggested Links

* [API Reference of the MultiSelectTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent)
* [Data Binding](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/data-binding)
* [Value Binding](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding)