Forms Support
You can use the TextBox in Template-driven and Reactive forms. The TextBox implements ControlValueAccessor, which means it integrates natively with Angular's form APIs without any extra configuration.
Template-Driven Forms
Template-driven forms use Angular's NgModel directive to bind the TextBox value to a component property. To declare the TextBox as a form field, add the name attribute and bind the value through [(ngModel)].
Angular's built-in validators, such as required, minlength, and maxlength, work as attributes directly on the kendo-textbox element. Angular reads these attributes and attaches the corresponding validators to the bound NgModel control.
The following example demonstrates how to use the TextBox in a template-driven form with required validation.
The TextBox reflects the Angular form control state through CSS classes (ng-valid, ng-invalid, ng-touched, ng-dirty). To display visual icons alongside the validation state, use the showSuccessIcon and showErrorIcon properties. Setting either property to 'initial' shows the icon after the field has been touched and the validation state changes.
Reactive Forms
Reactive forms are model-driven and defined in the component class through FormControl and FormGroup. Bind a FormControl to the TextBox by using the formControlName directive on kendo-textbox.
The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.
The following example demonstrates how to use the TextBox in a reactive form.
Pass built-in Angular validators from Validators as the second argument to FormControl. Common options include Validators.required, Validators.minLength(), and Validators.email. You can combine multiple validators in an array:
import { FormControl, FormGroup, Validators } from '@angular/forms';
this.form = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
email: new FormControl('', [Validators.required, Validators.email])
});Validation and Error Handling
To display contextual error messages alongside the TextBox, wrap it in a Kendo FormField. Use kendo-formerror elements for error messages and kendo-formhint for persistent helper text. For more information, refer to the FormField Hints and Errors article.
The FormField automatically shows kendo-formerror messages when the bound control is both invalid and touched (the default showErrors="initial" behavior). To always show error messages regardless of touch state, set showErrors="always" on the kendo-formfield.
The following example demonstrates a reactive form with field-level error messages for multiple validators.
Server-side validation remains essential for application security and data integrity. Client-side validation improves user experience but must be complemented by server-side checks.
Managing the TextBox Disabled State in Reactive Forms
To disable the TextBox component when working with reactive forms and Angular 15 or later, use the FormControl's disabled property/option or disable() method.
Angular 15 introduces a breaking change affecting the synchronization of
setDisabledStatewith the model-DOM. This impacts components using thedisabledattribute. As a result, thedisabledproperty of the Kendo UI for Angular components used prior to Angular 15 is no longer working in reactive forms.