Form validation in Angular JS.

Total Post:341

 902  View(s)
Rate this:
We want to Form validation in Angular JS. How to vailidate please help me.
  1. Post:279

    Re: Form validation in Angular JS.

    In this example form valid then visible Submit button .

        Layout = null;
    <!DOCTYPE html>
        <meta name="viewport" content="width=device-width" />
        <script src="~/Scripts/jquery-2.1.4.js"></script>
        <script src="~/Scripts/angular.js"></script>
         var app = angular.module("rgValidation", []);

         app.controller("VisitorFormController", function ($scope, $http) {      
             $scope.visitorInfo = {};
             $scope.storedInfo = {};         
             $scope.lastSampleIndex = 0;
             $scope.update = function (formData) {
                 $scope.storedInfo = angular.copy(formData);
             $scope.reset = function () {
                 $scope.visitorInfo = angular.copy($scope.storedInfo);
             $scope.isUnchanged = function (formData) {
                 return angular.equals(formData, $scope.storedInfo);



    body {
        font-family: Helvetica,Arial;
        font-size: 10pt;

    input {
    } {

    Unfortunately there is no consistent implementation
    for placeholder, which is the reason for this ugliness
    */,,, {

    .outerwrapper {

    .formwrapper {
     border:1px solid #666;
     box-shadow: 5px 5px 5px #888888;
     background: #F7F2E0;


    .label {

    .buttons {
     text-align: center;

    .submitbtn:enabled {

    .bold {

    <body ng-app="rgValidation">
    <div class="outerwrapper" ng-app="rgValidation" ng-controller="VisitorFormController" >

      <p>TIP: The sample button will fill the form for you.</p>

     <div class="formwrapper">
      <form  name="valForm"
        novalidate >
       <span class="label">First Name:</span>
       <input name="firstName" ng-model="visitorInfo.firstName" placeholder="First Name" required />
       <span class="valid" ng-show="valForm.firstName.$valid">&#10004;</span><br>
       <span class="label">Last Name:</span>
       <input name="lastName" ng-model="visitorInfo.lastName" placeholder="Last Name" required>
       <span class="valid" ng-show="valForm.lastName.$valid">&#10004;</span><br>
       <span class="label">Address:</span>
       <input name="address" ng-model="visitorInfo.address" placeholder="Address" required>
       <span class="valid" ng-show="valForm.address.$valid">&#10004;</span><br>
       <span class="label">City:</span>
       <input name="city" ng-model="" placeholder="City" required>
       <span class="valid" ng-show="$valid">&#10004;</span><br>
       <span class="label">State:</span>
       <input name="state" ng-model="visitorInfo.state" placeholder="State" required>
       <span class="valid" ng-show="valForm.state.$valid">&#10004;</span><br>
       <span class="label">Zip:</span>
       <input name="zip" type="number" ng-model="" placeholder="Zip" required>
       <span class="valid" ng-show="$valid">&#10004;</span><br>
       <span class="label">Email:</span>
       <input name="email" type="email" ng-model="" placeholder="Email" required>
       <span class="valid" ng-show="$valid">&#10004;</span><br>
       <div class="buttons">
        <button ng-click="reset()" ng-disabled="isUnchanged(visitorInfo)">CLEAR</button> 
        <button class="submitbtn" ng-click="update(visitorInfo)" ng-disabled="valForm.$invalid || isUnchanged(visitorInfo)">SUBMIT</button>



Enter your email address here always to be updated. We promise not to spam!