This sample demonstrates an Angular Reactive FormValidator. Type a values or characters in the input element. If the input values are correct format then the given input will be ready to submit otherwise error message will be shown until entering the input as correct format.
Form Validator can be used to validate the form input elements with the required validation rules.
The above form is configured with the following rules and also, we have given the examples of valid values for each field.
| Validation Functions | Rule | Example |
|---|---|---|
| required | The field must have any value. | value |
| The input must have email format. | info@syncfusion.com | |
| url | The input must have URL format. | https://www.syncfusion.com/ |
| date | The input must have JavaScript date format. | 04/13/2017 |
| dateIso | The input must have date ISO format. | 2017-04-13 |
| number | The input must have number format. It allows float values. | 1 or 1.4 |
| digits | The input must have digit format. | 1 |
| maxLength | The input value must have less than 5 characters length. | world |
| minLength | The input value must have more than 5 characters length. | syncfusion |
| rangeLength | The input must have number value from 5 to 10 characters length. | syncfusion |
| max | The input must have number value less than or equal to 5. | 4 |
| min | The input must have number value greater than or equal to 5. | 6 |
You can enter the above values in the corresponding input elements and click the submit button to validate the form. The reset button can wipe out all the input values in the form.