Form Validation using AngularJs

AngularJs performs form validation on the client-side. Using AngularJs monitors the state of the form and input  fields(input, select and text-area), user will notify about the current state.

AngularJs also holds information about whether they have touched, or modified, or not.

Forms have following states:

• $pristine That means no form fields are modified yet.
• $dirty That means one or more fields has been modified.
• $valid That means form content is valid.
• $invalid That means form content is not valid.
• $submitted That means form are submitted.

All properties of form having Boolean value that means true or false. 

HTML input fields have following states:

• $touched That means field are not touched yet.
• $untouched That means field has touched.
• $pristine That means field are modified.
• $dirty That means field are modified.
• $invalid That means field content is not valid.
• $valid That means field content is not valid.

All properties of input field having Boolean value that means true or false.

<form name="registrationForm" ng-submit="submitForm(registrationForm.$valid)"

    novalidate>

  <div class="form-group">

      <label>Name*</label>

    <input type="text" name="name" class="form-control" ng-model="user.name" required>

    <p ng-show="registrationForm.name.$invalid && !registrationForm.name.$pristine" 

       class="help-block">You name is required.</p>

  </div>

  <div class="form-group">

      <label>Email</label>

      <input type="email" name="email" class="form-control" ng-model="user.email">

      <p ng-show="registrationForm.email.$invalid && !registrationForm.email.$pristine

        " class="help-block">Enter a valid email.</p>

  </div>

<div class="form-group">

      <label>Password</label>

      <input type="text" name="password" class="form-control" ng-model="user.password"

         ng-minlength="6" ng-maxlength="8">

      <p ng-show="registrationForm.password.$error.minlength" class="help-block">

            Password is too short.</p>

      <p ng-show="registrationForm.password.$error.maxlength" class="help-block">

            Password is too long.</p>

  </div>

  

  <button type="submit" class="btn btn-primary">Submit</button>

  

</form>