New to Kendo UI for Angular? Start a free 30-day trial

Forms Guideline

This Forms Guideline article helps Angular developers build gorgeous and functional forms. This knowledge is based on years of experience with building forms, interacting with other developers building forms, and keeping up with industry best practices.

Some of the concepts the article covers include:

  • Structuring horizontal or vertical form layouts.
  • Separating form components into logical groups with separators.
  • Handling hint and validation messages.
  • Automatically displaying content, based on the state of a form element.
  • And many, many more.

The included examples showcase how to build Angular forms in two ways: with Kendo UI for Angular components and with native HTML elements. As a result, the guidance can be used by anyone. To see any of the examples in action, click the Open in StackBlitz link at the top of each sample.

Form Controls

Forms consist of form controls, such as text fields, buttons, checkboxes, range controls, dropdowns, color pickers, and so on. Building forms with Kendo UI for Angular allows you to take full advantage of the Angular features and use Kendo components and/or native HTML controls.

Example
View Source
Edit In Stackblitz  
Change Theme:

FormField Component

The FormField enables you to group, align and control form-related content, such as hint and error messages associated with Kendo components or HTML input elements.

The component provides a way to configure the visibility of the hints through HintComponent, and errors through ErrorComponent depending on the form-bound control state. For more information, refer to the API Reference of the FormField article.

Each kendo-formfield element can contain a single form control element, a label, and multiple hint or error messages. The only exception to this rule is а RadioButton group.

The FormField component associates the control and its visible hint and error messages by assigning the aria-describedby attribute to the focusable element. As a result, screen readers can read out the messages when the user focuses the form control, making it easier for assistive technology users to understand what data has to be entered.

Inputs

The following example demonstrates Kendo Inputs within a form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Checkboxes and RadioButtons

The following example demonstrates Kendo Checkboxes and RadioButtons within a form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Uploads

The following example demonstrates Kendo Upload and FileSelect within a form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

DropDowns

The following example demonstrates Kendo DropDowns within a form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

DateInputs

The following example demonstrates Kendo DateInputs within a form in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Read-Only and Disabled Controls

Rendering the control in a readonly state makes it immutable and the user cannot edit it. The read-only controls are still responsive to interaction, participate in constraint validation, and can be focused.

Rendering the control in a disabled state makes it immutable. By default, in both Reactive and Template-driven Angular Forms, the disabled form field values are excluded from the FormGroup value object. The disabled controls are not responsive to user interaction and do not participate in constraint validation.

Defining a disabled control in Reactive Angular forms can be accomplished by adding Validator functions directly to the form control model in the component class.

Example
View Source
Edit In Stackblitz  
Change Theme:

Sizing

By default, all form controls nested in a form with the .k-form class will take 100% of the width of their parent element, except for the ColorPicker, Switch, and Slider components.

Labeling

Labels are associated with form control elements not only visually, but also programmatically. Assistive technologies will read the label content when the form element is focused. Additionally, on label click, the form element will receive focus, providing an increased hit area to activate it.

Labels

The Label component associates a label tag with an Angular component by a template reference. When the form control is a plain HTML element, a simple ID is used to associate the pair. Additionally, it provides the option to mark it as an Optional form field.

Floating Labels

Тhe floating label is an inline label which moves above the input when the user focuses the form field or enters a value. It looks elegant and provides better user experience. The resolved animation when moving to the next field gives users a sense of completion.

The FloatingLabel component supports both Template-driven and Reactive Forms and can contain a Kendo UI for Angular Input or an HTML input element.

Example
View Source
Edit In Stackblitz  
Change Theme:

Optional Labels

The way a form field is visualized has a strong implication for how users perceive and complete forms. As an example, instead of marking every field as required, you can only mark the optional fields. This results in less visual noise since there will be fewer red marks across the user interface which helps users complete forms faster.

Both the Label and FloatingLabel components have an optional Boolean property. When set to true, it renders the text (Optional) inside the label element of the form control. The text is customizable through custom messages or the Angular i18n framework. For further details and runnable demos, refer to the article on Globalization.

Example
View Source
Edit In Stackblitz  
Change Theme:

Placeholder Texts

Typically, the placeholder text has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid.

Hint Messages

Hint messages provide additional context about the expected value of a form control. For example, in a registration form where users have to provide a password containing at least three characters, a hint message aligned under the input avoids confusion.

Example
View Source
Edit In Stackblitz  
Change Theme:

Validation

Form validation is used to make sure the users provide correct information in terms of format, content length, and so on. For example, is actually the Email in an email format, did the user place information in all required fields, and so on.

How Validation Works

The Kendo UI for Angular components support the handling of user input in the UI and display useful validation messages using both Reactive and Template-driven Angular forms. The validation rules refer to specific checks that are managed client-side. Server-side validation is not handled by the components, but is still an essential part of the application security, and has to be addressed by the developer.

Field-Level Validation

Field-level validation ensures that the value entered in the field is in accordance with the application requirements. If the validation rules are not satisfied, the field will display an error message.

To keep the form UI clean, the error messages of an invalid control are usually not shown until the user specifically interacts with it. Validation messages are displayed based on the following common factors:

  • The control was editeddirty.
  • The control was blurredtouched.
  • AlwaysShow error messages regardless of user interaction.

The FormField component enables you to control when and how validation messages will be shown in compliance with the Angular form validation guide.

Error Messages

For instant validation, error messages are the best way to alert users that they made a mistake while filling out a form. Applying only error-specific styles does not convey enough information about what the user has to do to provide valid data. Error messages need to specify exactly why the user input is not accepted and have to be displayed in one field at a time.

Example
View Source
Edit In Stackblitz  
Change Theme:

Form-Level Validation

Form-level validation is the process of validating all fields in a form at once. It is usually called when the user is ready to proceed to another step or clicks the Submit button.

Validation Summary

The validation summary displays a list of all validation errors in a single place. You can also use it to display complex validation messages. This approach can be useful when dealing with large forms, especially if the form contains parts that are temporarily hidden.

Example
View Source
Edit In Stackblitz  
Change Theme:

Form Layout

When it comes to filling out a form, users want to move through it as quickly as possible without having to overthink anything. A great form layout leads to seamless completion and improves the speed of the submission process. Using a single-column layout results in significantly better user understanding, fewer errors, and higher overall rates of conversion.

Horizontal and Vertical

By default, most Kendo UI components are 100% wide when placed inside a kendo-formfield. As a result, Kendo forms are stacked vertically.

To make a horizontal form layout and position form controls along with their labels on the same row:

  1. Assign the k-form-horizontal class to the form element.
  2. Set the orientation property of the FormField to horizontal.
Example
View Source
Edit In Stackblitz  
Change Theme:

Groups and Separators

Grouping form controls in a meaningful way creates a cleaner and more concise form content. Use the legend and fieldset elements to show a relation between form controls, which is especially useful when it comes to large and complex forms.

Separators add a line break to the layout and improve the form conversion rate. The separation of sections allows you to make long forms easier to handle. To add a separator, add the k-form-separator class on a span element.

Example
View Source
Edit In Stackblitz  
Change Theme:

Form Buttons

By default, the buttons align to the left side of the form. Adding the k-buttons-end class to the buttons wrapper element allows you to position them on the right.

Example
View Source
Edit In Stackblitz  
Change Theme: