FormField Hints and Errors
The FormField component provides comprehensive support for displaying contextual hints and validation error messages for form controls. This functionality is essential for creating user-friendly forms that guide users through data entry and provide clear feedback about validation requirements and errors.
Effective use of hints and error messages improves user experience by:
- Providing guidance—Hints help users understand what information is expected in a field
- Preventing errors—Clear instructions reduce the likelihood of invalid input
- Offering immediate feedback—Validation messages appear as users interact with form fields
- Improving accessibility—Proper implementation ensures screen readers can access instructional content
To implement hints and errors within the FormField component, you need to include the HintComponent and FormErrorComponent components inside the FormField component.
<kendo-formfield>
<kendo-label [for]="name" text="Name"></kendo-label>
<kendo-textbox #name formControlName="name"></kendo-textbox>
<kendo-formhint>Enter your full name</kendo-formhint>
<kendo-formerror>Invalid name</kendo-formerror>
</kendo-formfield>For comprehensive information about validation patterns and error handling strategies, refer to the Form Validation article.
The following example demonstrates the FormField component with hints and errors in action.
Controlling the Visibility
The FormField component provides fine-grained control over when hint and error messages are displayed through the showHints and showErrors properties. This control ensures messages appear at the appropriate time in the user's interaction workflow.
By default, the component follows these visibility rules:
- Error messages are hidden initially and display when the form control becomes invalid after user interaction (touched or dirty state).
- Hint messages are visible initially and hide when error messages need to be shown, preventing visual clutter.
The showHints property accepts the following values:
initial—The hint messages are displayed when the state of the form-bound component isvalidoruntouchedandpristine.always—The hint messages are always displayed, leaving the control of their content visibility to the developer.
The showErrors property accepts the following values:
initial—The error messages are displayed when the state of the form-bound component isinvalidandtouchedordirty.always—The error messages are always displayed, leaving the control of their content visibility to the developer.
The following example demonstrates customized visibility control where hints are always shown and errors follow the initial display pattern:
<kendo-formfield showHints="always" showErrors="initial">
<kendo-label [for]="name" text="Name"></kendo-label>
<kendo-textbox #name formControlName="name"></kendo-textbox>
<kendo-formhint>Enter your full name</kendo-formhint>
<kendo-formerror>Invalid name</kendo-formerror>
</kendo-formfield>This configuration ensures users always see helpful guidance while error messages appear only when validation fails after user interaction, providing a balanced user experience.
Message Alignment
The positioning of hint and error messages can significantly impact the visual flow and usability of your forms. The FormField component allows you to control message alignment through the align property available on both the HintComponent and ErrorComponent.
<kendo-formhint align="start">Your username</kendo-formhint>
<kendo-formerror align="end">Error: Username is required</kendo-formerror>The following example demonstrates different alignment configurations for hint and error messages.