Angular Form Validation

by Santosh Thakur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid" ng-app="myApp">
  <div class="row" ng-controller="formCtrl">
    <form class="col-xs-12" name="userForm" novalidate>
      <div class="form-group">
        <label for="fname">First Name:</label>
        <input type="fname" class="form-control" name="fname" id="fname" ng-model="user.fname" ng-required="true">
        <p class="error" ng-show="userForm.fname.$invalid && userForm.fname.$touched">Error in this massage</p>
      </div>
      <div class="form-group">
        <label for="lname">Last Name:</label>
        <input type="lname" class="form-control" name="lname" id="lname" ng-model="user.lname" ng-required="true">
        <p class="error" ng-show="userForm.lname.$invalid && userForm.lname.$touched">Error in this massage</p>
      </div>
      <div class="form-group">
        <label for="comp">Company:</label>
        <input id="comp" name="comp" type="password" class="form-control" ng-model="user.comp" ng-required="true">
        <p class="error" ng-show="userForm.comp.$invalid && userForm.comp.$touched">Error in this massage</p>
      </div>

      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" name="email" class="form-control" id="email" ng-model="user.email" ng-required="true">
        <p class="error" ng-show="userForm.email.$invalid && userForm.email.$touched">Error in this massage</p>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input id="pwd" name="pwd" type="password" class="form-control" ng-model="user.pwd" ng-required="true">
        <p class="error" ng-show="userForm.pwd.$invalid && userForm.pwd.$touched">Error in this massage</p>
      </div>

      <button type="submit" ng-click="submit()" class="btn btn-primary">Submit</button>
    </form>

    <div ng-if="hello">
      <h3>Welcome to your New Page</h3>
   ...

CSS

.error {
  color: red;
}

.ng-valid {
  border: 1px solid green;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.msg = "Form Validation";
  $scope.hello = false;
  $scope.submit = function() {
    if ($scope.userForm.$valid) {
      $scope.hello = true;
      
    }
  }
});