Form Validation
Form validation is a critical component of user experience that ensures users provide correct information in terms of format, content length, required fields, and data integrity. The Kendo UI for Angular Form components provide comprehensive validation capabilities that integrate seamlessly with Angular's built-in form validation system.
Effective form validation guides users to provide valid data while maintaining a clean and intuitive interface. The Kendo UI for Angular Form components work with Angular's powerful form validation system, supporting both Reactive Forms and Template-driven Forms. The validation system provides:
- Client-side validation—Immediate feedback for common validation rules such as required fields, email format, minimum/maximum length, and custom validators.
- Integration with Angular validators—Full compatibility with Angular's built-in validators and custom validator functions.
- Flexible error display—Control when and how validation messages appear based on user interaction.
- Accessibility support—Proper ARIA attributes and screen reader compatibility.
Server-side validation remains essential for application security and data integrity. Client-side validation enhances user experience but should always be complemented by server-side validation.
Error Messages
Error messages provide specific guidance to help users understand what needs to be corrected. Effective error messages should:
- Clearly explain what is wrong with the input.
- Provide specific guidance on how to fix the issue.
- Use plain language that is easy to understand.
- Be displayed at the appropriate time in the user's workflow.
The FormError component is used to display validation messages within a FormField:
<kendo-formfield>
<kendo-label [for]="password" text="Password"></kendo-label>
<kendo-textbox formControlName="password" #password type="password"></kendo-textbox>
<kendo-formerror *ngIf="form.get('password')?.errors?.['minlength']">
Password must be at least 8 characters long
</kendo-formerror>
</kendo-formfield>When a field can have multiple validation rules, you can display different error messages for different validation states using Angular's conditional directives:
<kendo-formfield>
<kendo-label [for]="email" text="Email Address"></kendo-label>
<kendo-textbox formControlName="email" #email></kendo-textbox>
<kendo-formerror *ngIf="form.get('email')?.errors?.['required'] && form.get('email')?.touched">
Email address is required
</kendo-formerror>
<kendo-formerror *ngIf="form.get('email')?.errors?.['email'] && form.get('email')?.touched">
Please enter a valid email address
</kendo-formerror>
</kendo-formfield>Field-Level Validation
Field-level validation provides immediate feedback to users as they interact with individual form controls. The FormField component automatically manages the display of validation messages based on the form control's state.
The FormField component displays validation messages based on the following form control states:
- Dirty—The control value has been changed by the user
- Touched—The control has been focused and then blurred
- Invalid—The control value fails one or more validation rules
- Valid—The control value passes all validation rules
The component also provides the showErrors property to control when validation messages are displayed:
initial(default)—Shows error messages when the control is invalid and has been touched or is dirtyalways—Always shows error messages regardless of user interaction, giving you full control over when to display them
<kendo-formfield showErrors="always">
<kendo-label [for]="username" text="Username"></kendo-label>
<kendo-textbox formControlName="username" #username></kendo-textbox>
<kendo-formerror>Username is required</kendo-formerror>
</kendo-formfield>The following example demonstrates the field-level validation where the errors are displayed immediately as the user interacts with the form controls.
Form-Level Validation
Form-level validation validates all form controls simultaneously, typically triggered when the user attempts to submit the form. This approach ensures that all required fields are completed and valid before processing the form data. This approach is particularly useful for:
- Large forms with many fields.
- Multi-step forms where errors might be on different steps.
- Forms with complex validation rules.
- Accessibility compliance where screen readers need a summary.
The following example demonstrates how to implement form-level validation with a validation summary.
Validation with Reactive Forms
Reactive forms provide a powerful way to manage form validation using Angular's FormControl, FormGroup, and FormArray classes. The Kendo UI for Angular Form components integrate seamlessly with reactive forms, allowing you to define validation rules directly in your component class. For more details, refer to the Reactive Forms Support documentation.
Validation with Template-Driven Forms
Template-driven forms use Angular's ngModel directive to bind form controls to model properties. The Kendo UI for Angular Form components support template-driven forms, allowing you to define validation rules directly in your templates. For more details, refer to the Template-Driven Forms Support documentation.