2. Using Angular Forms Validation API

Most of the related user-input elements can be collected by HTML5 <form> element. Angular redefines the form directive, makes it to have a holistic mechanism for validation, so that the user can be notified of invalid submitted data for example. Notice that in our application, the form element is not the orginal HTML5 tag any more, it has been replaced by Angular, which has an alias ngForm, and Angular allows us to define nested forms, but we must use the <ng-form> directive and assign it a name to the subforms. We only consider the non-nested form in our application. The following two formats are the same:

Format 1: <form name="formName">...</form>
Format 2: <ng-form name="forName">...</ng-form>

form in Angular is be tracked by form.FormController, which keeps watching on the state of form, such as being valid/invalid. When the name attribute of <form> is specified, the form will be published onto the current scope under this name. So the basic format of Angular <form> element would be:

<form name="formName" novalidate="novalidate">
  ...
</form>

novalidate is used to prevent the browser's native form validation, because every browser may have its own way to deal with form validation. That is not what we expect.

input is the most important form's sub-element, it is exactly the place where the user fill data. The Angular also redefined the HTML input element as a special directive, which has many variations depending on its type attribute such as checkbox, date, time, email, url, text and number, in our public library web application we will use only two of them: text and number.

To allow styling of form, ngModel will automatically adds some CSS classes, we list some of them here:

Angular defined also some properties for form directives:

See Angular Developer Guide or this AngularJS API Docs for more about the Angular form validation API.