# Forms Support

You can use the Switch in [Template-driven](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/forms#template-driven-forms) and [Reactive](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/forms#reactive-forms) forms.

## Template-Driven Forms

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

The following example demonstrates how to use the Switch in a template-driven form.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/switch/template-forms/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/dynamic-forms#bootstrap).

The following example demonstrates how to use the Switch in a reactive form.

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

## Managing the Switch Disabled State in Reactive Forms

To disable the Switch 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/inputs/api/switchcomponent#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/inputs/switch/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 Switch within a FormField with hint and error messages.

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

## Mapping Boolean Values to Custom Form Values

The Switch uses boolean values in Angular forms. If your application stores a different value type, bind the Switch to a boolean `FormControl` and map the values when you load and save the form.

When you load the form, set the control to `true` if the stored value matches the value you use for the on state. Set it to `false` otherwise. When you save the form, map the control's boolean value to the corresponding stored value for the on or off state.

The following example starts with `Y` as the stored value. Toggle the Switch to see the boolean form control value and the corresponding `Y` or `N` value to store. Feel free to adapt the mapping logic to match the values used by your application.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/switch/reactive-forms-custom-values/source.txt)

## Suggested Links

* [API Reference of the Switch](https://www.telerik.com/kendo-angular-ui/components/inputs/api/switchcomponent)