Angular forms with GitHub example — tutorial 6: form validation
This tutorial focuses on validation in Angular forms and it’s part of a series of tutorials focused on Angular forms. in this series, I have introduced how to create a basic form in Angular, style it using Angular material and Bootstrap, use two-way data binding to capture user data, posting data using HTTP and post using real api and error handling.
So focus of this tutorial is on providing feedback on user interactions with form. by the end of this, we should be able to show error messages when user doesn’t fill up a required field or when data entered doesn’t fit required type. HTML5 client-side form validation is a very good reference for basic concepts and examples of form validation. I encourage you to read this reference before moving forward. Angular’s form validation works hand in hand with HTML5’s standards which makes it very easy to learn. Generally speaking many attributes introduced in HTML5 such as required field validator, minimum number of character validator are already included in Angular. Angular uses a special CSS based approach to indicate a validation error that is applied on the element and parent form. In a form with couple of input elements such as textboxes, radio buttons and checkboxes validation focuses on two main avenue. First required field validation, which makes an input mandatory. Second, validating against a regular expression where it checks entered value against an expected pattern to see if it matches. An example of regular expression could be email entry.
Now let’s see it in action. In our details-form component template and add required to firstname input.
<input class=”details-form__form-field__input” matInput placeholder=”please enter first name” value=”” [(ngModel)]=”person.firstName” name=”firstName” required>
As you can see a little star character appeared next to First name label, indicating that field is a required one. And if you press the submit button, without adding any value to it, it turns in to a different color to indicate it’s missing a value.
Now, lets go ahead and add “minlength” and “maxlength” that evaluate and maximum minimum number of entered characters. Also, we need o add a pattern to make sure only chars are entered in the input not special characters or numbers.
If you noticed the form indicates validation requirements by highlighting corresponding fields but it doesn’t tell users what has caused the validation error and how they can fix it. Also, it does allow users to submit a form that has validation errors. That’s because Angular turns native HTML5 browser validation off because there are many variations in how browsers deal with validation so the end product will behave differently in different browsers.
So Angular is continuously looking in to the form and make changes to classes based on current values of input elements. So Angular uses below classes to represent current status of the element:
A field at the beginning has ng-untouched value which means user has not interacted with the field yet. When a field is touched, meaning user clicked on the field or used tab to focus on it and then moved to any other field, its status changes to ng-touched. A field’s initial value (set by value property) is ng-pristine by default which means original value has not been modified. Any change to the initial value makes it ng-dirty. Finally, ng-valid means the form, considering validation attributes, is valid and if one or more validation rule is broken, the class changes to ng-invalid.
Now, let’s add a variable name to our first-name input to monitor change of class names in it. I’m gonna call that variable ClassName and use # to identify it. Then use class name property to print it on the screen.
<input class=”details-form__form-field__input” matInput placeholder=”please enter first name” value=”” [(ngModel)]=”person.firstName” name=”firstName” minlength=”3" maxlength=”25" required#classNames></mat-form-field>{{classNames.className}}
Now we just need to add error message and emphasize on invalid elements. I’m gonna use mat-error control to show errors like this:
<mat-form-field class=”details-form__form-field” hintLabel=”min 3, Max 25 characters.” ><mat-label class=”details-form__form-field__label”>First name</mat-label><input class=”details-form__form-field__input” matInput placeholder=”please enter first name” [(ngModel)]=”person.firstName” name=”firstName” minlength=”3" maxlength=”25" required#firstName=’ngModel’ ><mat-error *ngIf=”firstName.hasError”>First name is not valid</mat-error></mat-form-field>
Also, I’ve used hintLabel property to show a hint so the user would know about required value for an input.
This tutorial concludes a series of tutorials on Angular form. if this is the first time you are seeing my tutorial, please have a look at my first tutorial on creating basic forms in Angular and then form styling in Angular, two-way data binding, posting form data using API and services and error handling. The project code is here in my personal GitHub page https://github.com/ramin-ahmadi/angular-forms and you can see a full demo on StackBlitz https://stackblitz.com/github/ramin-ahmadi/angular-forms
Feel free to reach out to me if you have any questions.
