# Forms Support

You can use the FileSelect in template-driven or reactive forms.

The component supports the `required` built-in Angular validation and builds on top of that with custom `restrictions` for file extensions, minimum, and maximum file size.

## Template-Driven Forms

The template-driven forms enable you to bind the FileSelect to the model by using the [ngModel](https://angular.io/guide/forms#two-way-data-binding-with-ngmodel) directive.

The following example demonstrates how to utilize the `required` validation and the `restrictions` configuration option. With these settings in place, the form will become valid when an image file is selected.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/uploads/fileselect/forms/template/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 FileSelect in a reactive form.

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

## Managing the FileSelect Disabled State in Reactive Forms

To disable the FileSelect 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-develop/components/uploads/api/fileselectcomponent#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/uploads/fileselect/forms/reactive-forms-disabled/source.txt)

## FormField Association

The following example demonstrates how to use the FileSelect within a [FormField](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/form/formfield) component and provide hint and error messages:

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

## Suggested Links

* [API Reference of the FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent)