Chapter 6. Constraint Validation in an AngularJS Frontend Web App

Table of Contents

1. New Issues
2. Using Angular Forms Validation API
3. Generic Constraints and Validations
4. Specific (Custom) Constraints and Validations
4.1. Calculated Value
4.2. Unique Value
4.3. Display Error-Messages
5. Encode our Web Application with Validation
5.1. New Folder's Structure with errorMessages
5.2. Start page - Index.html
5.3. Application's Initialization - js/app.js
5.4. Create Object Use Case
5.5. Error Messages
5.6. Update Object Use Case
5.7. Validation in Controller
6. Evaluation
7. Run the App and Get the Code

The minimal AnuglarJS frontend web app that we have discussed in Part 1, has been limited to support the minimum functionality of a data management app only. For instance, it did not take care of preventing the user from entering invalid data into the app's database. In this second part of the tutorial we show how to express integrity constraints in AngularJS, and in the user interface built with AngularJS extended HTML tags.

We consider the same single-class data management problem that was considered in Part 1 of this tutorial. So, again, the purpose of our app is to manage information about books. But now we also consider the data integrity rules (also called 'business rules') that govern the management of book data. These integrity rules, or constraints, can be expressed in a UML class diagram as shown in Figure 6.1 below.

Figure 6.1. A platform-independent design model with the class Book and its invariants

A platform-independent design model with the class Book and its invariants

In this model, the following constraints have been expressed:

  1. Due to the fact that the isbn attribute should be declared as the standard identifier of Book, so we define it also as mandatory and unique. The isbn attribute has a pattern constraint requiring its values to match the ISBN-10 format that admits only 10-digit strings or 9-digit strings followed by "X".

  2. The title attribute is mandatory, as indicated by its multiplicity expression [1], and has a string length constraint requiring its values to have at most 50 characters.

  3. The year attribute is mandatory and has an interval constraint, however, of a special form since the maximum is not fixed, but provided by the calendaric function nextYear(), which we implement as a utility function.

  4. The edition attribute is not mandatory, but optional, as indicated by its multiplicity expression [0..1].

In addition to the constraints described in this list, there are the implicit range constraints defined by assigning the datatype NonEmptyString as range to isbn and title, Integer to year, and PositiveInteger to edition. In our AngularJS approach, all these property constraints are encoded in the user interface built with HTML5. To be more precisely, when HTML5 <form> and <input> elements used together with Angular directives such as ngModel, Angular provides data-binding, input state control, and validation. Please notice that we implement the application using Parse cloud storage, it will automatically add an property objectId as standard identifier for each object.

1. New Issues

Compared to the minimal app discussed in Part 1 (Minimal App Tutorial) we have to deal with a number of new issues during creating or updating a book:

  1. adding for every property integrant Angular directives for validating the constraints;

  2. performing validation before any data is saved;

  3. responsive validation on user input for providing immediate feedback to the user;

  4. validation on form submission for preventing the submission of flawed data.

Checking the constraints in the user interface on user input is important for providing immediate feedback to the user. But it is not safe enough to perform constraint validation only in the user interface, because this could be circumvented in a distributed web application where the user interface runs in the web browser of a frontend device while the application's data is managed by a backend component on a remote web server.

Consequently, we need a two-fold validation of constraints, luckly Angular is a specific templating system, it provides bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means we don't need to write code to constantly sync the view with the model and the model with the view as in other templating systems.

To solve all of these problems we do not need to change the folder's structure in Part 1. What we need is only to insert several Angular directives in the templates for different constraints and validation. In following sections we will first emphasize the details of constraints and validations with Angular, then discuss different ways of displaying error messages, at last show the whole program.