Chapter 5Disabling native browser validation
Modern browsers naturally try to validate the input values in a form. Normally
this occurs when the form is submitted. For instance, if you have a required
attribute on an input box, the browser will complain independently of AngularJS,
if the field does not contain a value when you try to submit the form.
Since we are providing all the validation through AngularJS directives and
controllers, we do not want the browser to attempt its own native validation.
We can turn off this by applying the HTML5 novalidate attribute to the
form element:
<form name="novalidateForm" novalidate>Try it at http://bit.ly/1110hS4.
This form is called novalidateForm and the novalidate attribute will tell the
browser not to attempt the validation on any of the inputs in the form.
Nesting forms in other forms
Unlike standard HTML forms, AngularJS forms can be nested inside each other.
Since form tags inside other form tags are invalid HTML, AngularJS provides the
ngForm directive for nesting forms.
Each form that provides a name will be added to its parent form,
or directly to the scope if it has no parent form.Using subforms as reusable components
A nested form acts like a composite field that exposes its own validation information
based on the fields that it contains. Such forms can be used to reuse as subforms by
including them in container forms. Here we group two input boxes together to create
a password and password confirmation widget:
<script type="text/ng-template" id="password-form">
<ng-form name="passwordForm">
<div ng-show="user.password != user.password2">
Passwords do not match
</div>
<label>Password</label>
<input ng-model="user.password" type="password" required>