Chapter 8. Forms and validations
This chapter covers
- How AngularJS extends form elements
- Handling validations with AngularJS
- Setting up validations on an element
- Displaying validation errors and Angello
Angello has turned into a fairly full-featured application at this point, but there’s a major piece of functionality that we need to add. What happens if a user submits a new story and they haven’t filled in any information? What happens if we want to limit the length of the title field? We need to be able to enforce conformity on the data that goes into the application, as well as provide instant feedback to the user when something is amiss. This is where forms and validations play a crucial role in developing an AngularJS application.
In this chapter we’ll explore how AngularJS extends HTML forms so that you can bind the form and its form elements to $scope. We’ll use that relationship to enable and disable the ability to submit a form. We’ll then show how to set validations on individual form elements, and finally display feedback to the user based on their input.
When adding form validations to a project such as Angello, you start with the form object itself and then work inwards to the input and other form elements that are the children of this form object. We’ll outline the actual states that the form takes during input within the controller, and then use those states to show meaningful feedback in our view. See figure 8.1.