Book Image

Angular 6 by Example - Third Edition

By : Chandermani Arora, Kevin Hennessy
Book Image

Angular 6 by Example - Third Edition

By: Chandermani Arora, Kevin Hennessy

Overview of this book

<p>Angular helps you build faster, efficient, and flexible cross-platform applications. Creating complex and rich web applications, with a lighter resource footprint, has never been easier or faster. Angular is now at release 6, with significant changes compared to previous versions.</p> <p>In this third edition of Angular by Example, you’ll build three apps with varying degrees of complexity. The book starts with a simple “Guess the Number”game, which serves as a platform to launch you into the world of Angular. Next, you will learn to develop a popular “7-Minute Workout” app, covering the building blocks of Angular. The final app, “Personal Trainer” morphs the existing “7-Minute Workout” into a full-fledged personal workout builder and runner, covering advanced directive building, which is the most fundamental and powerful feature of Angular.In addition to this, you will learn about testability and the framework constructs Angular provides to effectively test your app. The book concludes by providing you with practical advice and useful tips that will come in handy as you build more apps with Angular.</p>
Table of Contents (15 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Index

Building a remote validator directive


We ended Chapter 5, Supporting Server Data Persistence, with Workout Runner capable of managing workouts in the MongoDB store. Since each workout should have a unique name, we need to enforce the uniqueness constraint. Therefore, while creating/editing a workout, every time the user changes the workout name, we can query MongoDB to verify that the name already exists.

As is the case with any remote invocation, this check too is asynchronous, and hence it requires a remote validator. We are going to build this remote validator using Angular's async validator support.

Async validators are similar to standard custom validators, except that instead of returning a key-value object map or null, the return value of a validation check is a promise. This promise is eventually resolved with the validation state being set (if there is an error), or null otherwise (on validation success).

We are going to create a validation directive that does workout name checks....