{"id":518,"date":"2023-02-20T05:00:00","date_gmt":"2023-02-20T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=518"},"modified":"2023-02-16T15:34:51","modified_gmt":"2023-02-16T23:34:51","slug":"basic-form-validation-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/basic-form-validation-with-angular\/","title":{"rendered":"Basic form validation with Angular"},"content":{"rendered":"\n

Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation.<\/p>\n\n\n\n

First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required<\/code> HTML attribute: <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If the user input has to match a specific format, you can specify such format using the pattern<\/code> attribute<\/a>, which uses a regular expression syntax – here, a 5-digit number<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Other available HTML validation attributes are min<\/a><\/code>, max<\/code>, minlength<\/a><\/code>, maxlength<\/code>. You can also set the input type to something more specific than text<\/code>, such as email<\/code> or tel<\/code> for additional validation and capabilities. Here is the list of all possible input types<\/a>.<\/p>\n\n\n\n

Once you have specified your validation rules using such attributes, Angular is going to toggle some CSS classes on the corresponding HTML elements automatically: ng-valid<\/code> when the entered value is valid, and ng-invalid<\/code> when the entered value is invalid.<\/p>\n\n\n\n

This means that all we have to do to provide visual feedback to the user is implementing such classes in our CSS stylesheets:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above CSS classes result in the following styling of form inputs:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If we want to fine-tune the rendering of our form based on whether the user has already typed something or not, there are additional classes added by Angular for such purposes:<\/p>\n\n\n\n