We created this Forms Guideline document to help Angular developers build gorgeous and functional forms. The knowledge we are sharing here comes from years of experience with building forms, interacting with other developers building forms, and keeping up with industry best practices.
Some concepts that we cover include:
- structure horizontal or vertical form layouts
- separate form components into logical groups with separators
- handle hint and validation messages
- automatically display content, based on the state of a form element
- and many, many more
These 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 on the
"Open in StackBlitz" link at the top of each sample.
We hope that you find this guide useful! Now, let's kick things off by diving in to various form controls.
Forms consist of form controls, such as text fields, buttons, checkboxes, range controls, dropdowns, color pickers, etc. 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.
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 -
HintComponent and errors -
ErrorComponent depending on the form-bound control state. See more at the API Reference of the FormField article.
kendo-formfieldelement 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 will read out the messages when the user focuses the form control, making it easier for assistive technology users to understand what data should be entered.
The following example demonstrates Kendo Inputs within a form in action:
The following example demonstrates Kendo Checkboxes and RadioButtons within a form in action:
The following example demonstrates Kendo Upload and FileSelect within a form in action:
The following example demonstrates Kendo DropDowns within a form in action:
The following example demonstrates Kendo DateInputs within a form in action:
Rendering the control in a
readonly state makes it immutable and the user cannot edit it. The readonly 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.
By default, all form controls nested in a form with
.k-form class will take
100% of their parent element’s width, except for the ColorPicker, Switch and Slider components.
Labels are not just visually associated with form control elements, but programmatically as well. 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.
Label component associates a label tag with Angular component by 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 label is an inline label which moves above the input when the user focuses the form field or enters a value. It looks good and provides better user experience. The resolved animation when moving to the next field gives users a sense of completion.
The way we visualize a form field 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 our user interface. This will help 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 via custom messages or the Angular
i18n framework. Refer to the article on Globalization for further details and runnable demos.
The placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid.
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 3 characters, a hint message aligned under the input could avoid any confusion.
We use form validation to make sure the users provide correct information in terms of format, content length, etc. For example, is the Email in actual email format, did the user put info in all of the required fields, and so on.
Kendo UI for Angular components support handling 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, managed client-side. Server-side validation is not handled by the components, but is still an essential part of the application security, and should be addressed by the developer.
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, error messages for each field are displayed.
To keep the form UI clean, the error messages of an invalid control are usually not shown until specific user interaction. There are several common factors when to display a validation message:
- The control was edited—
- The control was blurred—
- Always—Show error messages regardless of user interaction
For instant validation, error messages are the best way to alert users that they have made a mistake while filling out a form. Applying only error-specific styles does not convey enough information about what the user should do to provide valid data. Error messages should specify exactly why the user input is not accepted and should be shown one field at a time.
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.
The validation summary displays a list of all the 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.
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 has been shown to result in significantly better user understanding, fewer errors and higher overall rates of conversion.
By default, most Kendo 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, assign the
k-form-horizontal class to the
form element and set the
orientation property of the FormField to
Grouping form controls in a meaningful way makes for a cleaner and more concise form content. The
fieldset elements can be used 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
By default, the buttons are aligned to the left side of the form. Adding the
k-buttons-end class to the buttons wrapper element allows positioning them on the right.