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.
The following example demonstrates the FormField component within a Template-Driven Angular form in action.
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.
Managing Visibility
The FormField component provides control for hint and error messages by setting showHints
and showErrors
properties.
The available showHints
values are:
- (Default)
initial
—The hint messages are displayed when the form-bound component state isvalid
oruntouched
andpristine
. always
—The hint messages are always displayed, leaving the control of their content visibility to the developer.
The available showErrors
values are:
- (Default)
initial
—The error messages are displayed when the form-bound component state isinvalid
andtouched
ordirty
. always
—The error messages are always displayed, leaving the control of their content visibility to the developer.
Alignment
Both the HintComponent
and ErrorComponent
allows you to specify text alignment by setting the align
property.
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.