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.
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.
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
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.
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.
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 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.
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.
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.
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.
Т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 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.
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 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.
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.
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 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 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 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.
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 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 results in significantly better user understanding, fewer errors, and higher overall rates of conversion.
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:
- Assign the
k-form-horizontalclass to the
- Set the
orientationproperty of the FormField to
Grouping form controls in a meaningful way creates a cleaner and more concise form content. Use the
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
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.
The approach that the built-in Dialog forms of the Kendo UI for Angular components utilise is to align the buttons to the left. The primary action button (e.g. "Submit") comes first, before the "Cancel" one.