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-formfieldelement 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 isvalidoruntouchedandpristine. 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 isinvalidandtouchedordirty. 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.
