AngularJS Essentials

Data Handling
Now, let's introduce a new parameter to give the users a chance to change the
plate's separator:
filters.js
parking.filter("plate", function() {
return function(input, separator) {
var firstPart = input.substring(0,3);
var secondPart = input.substring(3);
return firstPart + separator + secondPart;
};
});
Form validation
Almost every application has forms. It allows the users to type data that will be sent
and processed at the backend. AngularJS provides a complete infrastructure to easily
create forms with the validation support.
The form will always be synchronized to its model with the two-way data binding
mechanism, through the ngModel directive; therefore, the code is not required to
fulfill this purpose.
Creating our first form
Now, it's time to create our first form in the car parking application. Until now, we
have been using the plate of the car in any format in order to allow parking. From
now on, the driver must mention the details of the plate following some rules. This
way, it's easier to keep everything under control inside the parking lot.
The HTML language has an element called form that surrounds the fields in order to
pass them to the server. It also creates a boundary, isolating the form as a single and
unique context.
With AngularJS, we will do almost the same thing. First, we need to surround
our fields with the form element and also give a name to it. Without the name, it
won't be possible to refer to it in the future. Also, it's important to assign a name
to each field.
In the following code, we have added the form to our parking application:
index.html
[ 62 ]
www.it-ebooks.info