While the workout name is being validated remotely, we want the user to be aware of the activity in the background. A visual clue around the input box while the remote validation happens should serve the purpose.
Think carefully; there is an input box with an asynchronous validator (which does remote validation) and we want to adorn the input box with a visual clue during validation. Seems like a common pattern to solve? Indeed it is, so let's create another directive!
But before we start the implementation, it is imperative to understand that we are not in it alone. The busy indicator directive requires the help of another directive, NgModel
. We have already used the NgModel
directive on input
elements in Chapter 2, Personal Trainer. NgModel
helps us track the input element state. The following example is taken from Chapter 2, Personal Trainer, and it highlights how NgModel
helps us validate inputs:
<input type="text" name="workoutName" #name="ngModel...