Getting Started with Kendo UI for Angular FormField

The FormField enables you to group and provide configurable behavior of form-related content like inputs, labels, hint and error messages and supports both Reactive and Template-Driven Angular forms.

Each kendo-formfield element can contain a single form control element, a label and multiple hint or error messages. The only exception to this rule is a RadioButton group.

Basic Usage

The following example demonstrates the FormField component within a Reactive Angular form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates the FormField component within a Template-Driven Angular form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Hints and Errors

Hint and error messages can be displayed by adding HintComponent or ErrorComponent instances inside the FormField component.

Default Setup

By default, the errors are hidden and will be displayed when the form control is invalid after user interaction. If provided, the hints are initially visible and will hide if an error appears.

Example
View Source
Edit In Stackblitz  
Change Theme:

Managing Visibility

The FormField component provides control for hint and error messages by setting showHints and showErrors properties.

The available showHints values are:

  • (Default) initialThe hint messages are displayed when the form-bound component state is valid or untouched and pristine.
  • alwaysThe hint messages are always displayed, leaving the control of their content visibility to the developer.

The available showErrors values are:

  • (Default) initialThe error messages are displayed when the form-bound component state is invalid and touched or dirty.
  • alwaysThe error messages are always displayed, leaving the control of their content visibility to the developer.
Example
View Source
Edit In Stackblitz  
Change Theme:

Alignment

Both the HintComponent and ErrorComponent allows you to specify text alignment by setting the align property.

Example
View Source
Edit In Stackblitz  
Change Theme:

Horizontal Fields

The FormField component provides an option for changing the layout of its content by setting the orientation property to horizontal and adding the k-form-horizontal CSS class to the form element.

Example
View Source
Edit In Stackblitz  
Change Theme: