Kendo UI for Angular FormField Overview
The FormField component represents a single form field within a Form or FormFieldSet.
The FormField is a component that enables you to group, align, and control form-related content such as labels, inputs, dropdowns, hint and error messages.
<form kendoForm [formGroup]="form">
<kendo-formfield>
<kendo-label [for]="namr" text="Name"></kendo-label>
<kendo-textbox #name formControlName="name"></kendo-textbox>
</kendo-formfield>
</form>Each kendo-formfield element can contain a single form control element (excep the RadioButton group), a label, and multiple hint or error messages.
The following example demonstrates the FormField component in action.
Form Controls
The FormField component is designed to work with various form controls, allowing you to create a wide range of input types and validation scenarios. It provides a consistent and professional user experience while leveraging Angular's form handling capabilities.
The FormField component supports various form controls, including:
- Input fields (TextBox, NumericTextBox, ColoPicker, Switch, and others)
- Dropdown fields (DropDownList, MultiSelect, AutoComplete, and others)
- Date and time pickers (DatePicker, TimePicker, DateTimePicker, and others)
- Checkboxes and radio buttons
- Upload components (Upload, FileSelect)
Input Fields
The FormField component can be used with various input fields, such as TextBox, NumericTextBox, ColorPicker and others.
The following example demonstrates Kendo Inputs within a form in action.
Checkboxes and RadioButtons
The FormField component supports Checkboxes and RadioButtons, allowing you to create groups of options for users to select from. The Checkboxes can be used for multiple selections, while RadioButtons are ideal for single-choice scenarios.
The following example demonstrates Kendo Checkboxes and RadioButtons within a form in action.
Upload and FileSelect
The FormField component can be used with the Kendo Upload and FileSelect components, allowing users to upload files directly within the form. This integration provides a seamless experience for file uploads, including drag-and-drop support and progress tracking.
The following example demonstrates Kendo Upload and FileSelect within a form in action.
DropDown Fields
The FormField component can be used with various components part of the Kendo Angular DropDowns package. These components provide users with a convenient way to select from a list of options, enhancing the form's usability.
The following example demonstrates Kendo DropDowns within a form in action.
Date Fields
The FormField component can be used with various components part of the Kendo Angular DateInputs package. These components allow users to select dates and times easily, providing a consistent experience across different form fields.
The following example demonstrates Kendo DateInputs within a form in action.
Read-Only and Disabled Controls
Rendering a control as readonly makes it immutable, preventing user edits. However, read-only controls remain interactive: they can receive focus, respond to certain user actions, and participate in constraint validation.
In contrast, rendering a control as disabled also makes it immutable, but with additional restrictions. Disabled controls do not respond to user interaction, cannot receive focus, and are excluded from constraint validation. Moreover, in both Reactive and Template-driven Angular forms, disabled controls are omitted from the FormGroup value object by default.
To define a disabled control in Reactive Forms, apply Validator functions directly to the form control instance within the component class.
To disable a component when working with Reactive forms and Angular 15 or later, use the FormControl's disabled property/option or disable() method.