FormField Hints and Errors
The FormField component allows you to display hints and error messages for form controls. It is designed to enhance the user experience by providing contextual information about the form fields.
To use the FormField component for displaying hints and errors, 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>The following example demonstrates the FormField component with hints and errors in action.
Controlling the Visibility
By default, the errors are hidden and will be displayed when the form control is invalid after user interaction. If provided, the hints will be initially visible and will hide if an error occurs.
You can control the visibility of the hint and error messages by setting the showHints and showErrors properties of the FormField component.
The available showHints values are:
initial—The hint messages are displayed when the state of the form-bound component isvalidoruntouched, andpristine.always—The hint messages are always displayed, leaving the control of their content visibility to the developer.
The available showErrors values are:
initial—The error messages are displayed when the state of the form-bound component isinvalidandtouched, ordirty.always—The error messages are always displayed, leaving the control of their content visibility to the developer.
The following example demonstrates the visibility of the hint and error messages.
<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>Changing the Alignment
The messages can be displayed at the start or end of the input and can be controlled by setting the align property of 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 aligns the error message to the end of the input and the hint message to the start of the input.