Mastering Web Application

Creating Advanced Forms

In a standard HTML form, the value of an input element is the value that will be sent
to the server on submission of the form.

FORM SERVER

The trouble with the input elements holding the value of your submission is that
you are stuck with having to work with the input values as they are shown to the
user. This is often not what you want. For instance, a date input field may allow the
user to enter a string in some predefined format, for example, "12 March 2013". But
in your code you might want to work with the value as a JavaScript Date object.
Constantly coding up these transformations is tedious and error-prone.

AngularJS decouples the model from the view. You let input directives worry about
displaying the values and AngularJS worry about updating your model when the
values change. This leaves you free to work with the model, via controllers for
instance, without worrying about how the data is displayed or entered.

MODEL

CONTROLLER

FORM SERVER

DATA BINDING

To achieve this separation, AngularJS enhances HTML forms with the form and
input directives, validation directives, and controllers. These directives and
controllers override the built-in behavior of HTML forms but, to the casual observer,
forms in AngularJS look very similar to standard HTML forms.

First of all, the ngModel directive lets you define how inputs should bind to the model.