Register Form Validation with Angular

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" ng-controller="registerController">
  <form ng-submit="submitForm(userForm.$valid)" name="userForm" novalidate>

    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
      <label>Name</label>
      <input type="text" name="name" class="form-control" ng-model="user.name" required>
      <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
    </div>

    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
      <label>Username</label>
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
      <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
      <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
    </div>

    <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
      <label>Email</label>
      <input type="email" name="email" class="form-control" ng-model="user.email">
      <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    </div>

    <div class="control-group">
      <button class="btn btn-primary" type-="submit" ng-disabled="userForm.$isInvalid">Submit
      </button>
    </div>

  </form>
  {{hello.name}}
</div>

JavaScript

var registerApp = angular.module('registerApp', []);

// create angular controller
registerApp.controller('registerController', function($scope) {

  // function to submit the form after all validation has occurred            
  $scope.submitForm = function(isValid) {

    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is valid');
    }

  };

});