CHApTer 6 ■ WorkIng WITH ForMS
<select name="channels" ng-model="person.channels"
<input ng-model="person.newsletterOptIn" type="checkbox" name="newsletterOptIn"
id="newsletterOptIn" value="newsletterOptIn"/>
wallpaper
(WallPaper)
#1
For the most part, this is straightforward HTML. The two most important things to note are the existence of the
ngModel directive on each of the form elements and the fact that we have given the form a name. Giving the form a
name means that we can access some interesting AngularJS features, which I will discuss shortly. This form does not
yet meet the requirements, but we are well on the way. Figure 6-4 reveals how the form looks right now.
Figure 6-4. First-draft user registration form
It’s far from perfect, but we are on the right track. Let’s work our way through each of the fields, starting with the
First name and Last name fields (which are the same in terms of the requirements). Take note that both of these fields
make use of the required attribute. This attribute, which is an HTML5 attribute, not an AngularJS construct, tells
browsers to make sure that a value is entered before allowing the form to be submitted. I will talk more about this in
the next section, which covers validation in more detail.
Let’s move along to the Email field. This input element has a type of "email". This is very similar to a text input,
but it is specifically used for capturing e-mail addresses.