Validation
Overview of the Validation Component
The Validation component is used to define validation for the UI components that do not become the Validation property when included in the Form component or are difficult to combine for validation purposes.
How To: Validation
Please check the detailed instructions on how to set up the Validation component here.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
By default, the Validation component has the following properties:
| Property Name | Property Description |
|---|---|
| Error Msg Class | Add your class name(s) to customize the error message. Works only with global (external or defined in a scss asset) classes. |
| Show Errors | If set to True, validation errors are shown if the field value is invalid. I18n is applied for all error messages. |
| Required | If set to True the user must fill in a value before submitting a form. |
| Required Msg | Add your custom error message for Required. |
| Min | The minimum value, must not be greater than its maximum (max attribute) value. |
| Min Msg | Add your custom error message for Min. |
| Max | The maximum value, must not be less than its minimum (min attribute) value. |
| Max Msg | Add your custom error message for Max. |
| Min Length | If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters to be entered. |
| Min Length Msg | Add your custom error message for Min Length. |
| Max Length | If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters to be entered. |
| Max Length Msg | Add your custom error message for Max Length. |
| Pattern | Choose the predefined pattern or enter your custom pattern. For example: [0-9]+ |
| Pattern Msg | Add your custom error message for Pattern. |
| Function | Add your custom function for validation. Create a function on the CODE panel with the control argument.If validation fails, an object with a description message in customValidation property is returned.If validation is passed, null is returned.For example: return control.value == 'abc' ? null : {customValidation: 'Should be abc'}; |
| [(ngModel)] | Angular directive for data binding. |
Note
By default, the Name property is set as the Component name property but can be changed.
To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value.
Important!
The component can't be used if not included in the Form component.
Updated about 5 hours ago