AngularJs is often seen as a viable solution for building full scale single page web applications. In this post we will go over how Angular is particularly well suited for building form-intensive large scale apps due it's inumerous form validation features (example).
Angular was initially a tool for making forms simpler
Before it became an open source framework, Angular was meant as a development tool targeted mostly at web designers. The framework would allow designers to enhance plain HTML pages and give them the ability to validate and persist forms in a transparent way (see reference here).
Using Angular for form validation
At 44k minified and compressed, Angular packs a lot of interesting functionality for doing dynamic form validation.
Take for example the following form for user creation, it does the following (interactive example bellow):
- highlights fields in error dynamically as we type
- provide inline messages while the user is typing in a field
- disable the submit button until all the needed data is available and the terms and conditions checkbox is checked
For a working version of this form implementing the above functionality, check the following github repository.
Apart from that, the whole functionality is based on built-in Angular directives and
The Angular form directive
When Angular compiles the DOM inside
ng-app, it applies to form tags a built-in form directive. In the case of the above form, this means that the initial HTML of the form will look something like this:
Notice the strange looking
ng-pristine and the
ng-invalid classes that Angular automatically adds depending on the form state.
How do these built-in state classes work?
These classes are applied to both the form and the individual input fields, and can be used to help style the form. The following states are provided by Angular:
- ng-pristine: this means the form or input is in it's initial state: no input fields where touched or edited
- ng-touched: the control or form was clicked by the user, but not necessarily edited
- ng-dirty: the input control was edited by the user
- ng-invalid: the form control was edited but it contains an invalid value
- ng-valid: the input control was edited by the user and contains a valid value
For example the
ng-invalid state can be used to paint a red border around fields in error.
Angular built-in validation directives
The validations of each field can be declared directly in HTML. For example the password field has the following validations:
- field is mandatory
- minimum length of 6 characters
- maximum length of 10 characters
These validations are declared using the
See here the full list of built-in directives that can be applied to a form input. It's also possible to create our own validation directives.
Enhanced form validation with ng-messages
While the user is entering data, it's helpful to show a message informing him of the next step in the validation process, for example:
- first show that a field is required
- when the user starts typing, show a message indicating the minimum length
This is how the form should look with several of it's components dirty and invalid:
This functionality can be implemented using the ng-messages directive:
Controlling the state of the submit button
The submit button can be made enabled/disabled according to the form validity and the condition checkbox using the
With the use of the Angular built-in directives and some additional modules, it's possible to add a lot of commonly needed form validation features to an application, using a very small amount of code (see example).
Used together with
ng-model, the form validation built-in functionality makes building complex forms with Angular a much more approachable task.
A thorough walk-through of Angular form validation can be found on this screencast (pre-ngMessages).
Angular 2 Course
This YouTube course is meant to help developers Getting Started With Angular 2, no previous AngularJs experience is required:
Looking for other Angular 2 Learning Resources ?
Check our top 10 list of Angular 2 Resources:
Other posts on Angular 2
If you enjoyed this post, here some other popular posts on our blog:
- Angular 2 Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular 2 Components - The Fundamentals
- How to run Angular 2 in Production Today
- How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular 2 Forms - Template Driven, Model Driven or In-Between
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular 2
- How does Angular 2 Change Detection Really Work ?