Creating Advanced Forms
Creating a User Information Form
In this section we will describe a simple User Information Form from our
example SCRUM application. Throughout this chapter we will incrementally
add functionality to this form to demonstrate the power of AngularJS forms.
Here is our basic working form:
<h1>User Info</h1>
<label>E-mail</label>
<input type="email" ng-model="user.email"><label>Last name</label>
<input type="text" ng-model="user.lastName"><label>First name</label>
<input type="text" ng-model="user.firstName"><label>Website</label>
<input type="url" ng-model="user.website"><label>Description</label>
<textarea ng-model="user.description"></textarea><label>Password</label>
<input type="password" ng-model="user.password"><label>Password (repeat)</label>
<input type="password" ng-model="repeatPassword"><label>Roles</label>
<label class="checkbox">
<input type="checkbox" ng-model="user.admin"> Is Administrator
</label><pre ng-bind="user | json"></pre>Try it at http://bit.ly/10ZomqS.
While it appears that we simply have a list of standard HTML inputs, these are
actually AngularJS input directives. Each input has been given an ngModel
directive that defines what current scope to bind the value of the input element. In
this case, each input is bound to a field on the user object, which itself is attached to
the current scope. In a controller we could log the value of a model field like so:
$log($scope.user.firstName);