Beginning AngularJS

CHApTer 6 ■ WorkIng WITH ForMS

AngularJS Forms

With a discussion of standard forms and model binding behind us, we are in good shape to tackle AngularJS forms.
Of course, AngularJS forms are really just regular forms enhanced with AngularJS goodness.
In this section, we will build a user registration form from scratch and employ it to build up our AngularJS skills.
We will start off simple and enhance it along the way. Let’s work with some very basic requirements for this form.
These requirements are shown in Table 6-1.

Table 6-1. User Registration Form Requirements

Field Name Data Type Notes

First name Text Required

Last name Text Required

E-mail address Text Required

Must be formatted as an e-mail

address

Where did you hear about us? Text

One choice from a set of options: Television,

Radio, Social Media, and Other

Must match the set of questions

asked by Marketing across the

various communication channels

Would you like to subscribe to
our quarterly newsletter?

Yes or no Must be unchecked by default

Register Text The text that appears on the submit
button

■ Tip The more information and detail you can get before coding even a simple form, the easier the testing and

quality-control process will be later!

It’s fairly clear from these requirements, in general terms, at least, what we will need to build, in terms of a
user interface. Let’s take a look at some first-draft HTML code (Listing 6-9) that reflects something close to what
we are targeting.

Listing 6-9. First-Draft HTML Code for a User Registration Form