AngularJS Form Validation

AngularJS Form Validation.markdown

AngularJS Form Validation

Forked from Chris Sevilleja's Pen AngularJS Form Validation.

A Pen by BVS BHARAT KUMAR on CodePen.

License.

index.html

<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">  
   
<div class="col-sm-6">
    <!-- FORM ============ -->
  
    <form name="userForm" ng-submit="submitForm()" novalidate>

     
      
        <!-- USERNAME -->
      <div ng-form="forminside" ng-repeat =" item in passengerCount"> 
        <div class="form-group"  ng-class="{ 'has-error' : item.token.username.$invalid && !item.token.username.$pristine }">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="item.token.username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="item.token.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="item.token.username.$error.maxlength" class="help-block">Username is too long.</p>
        </div>
      </div>
        
        <button type="submit" class="btn btn-primary" ng-disabled="userForm.forminside.$invalid">Submit</button>
        
    </form>
  </div>

    
</div>
</div>
</div>

script.js

// create angular app
	var validationApp = angular.module('validationApp', []);

	// create angular controller
	validationApp.controller('mainController', function($scope) {
    
      $scope.passengerCount = [
        {
            id: 1,
            type: "ADT",
            token: {}
                    }
     ,
       {
           id: 2,
           type: "ADT",
           token: {}
                           }
        ]

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

			// check to make sure the form is completely valid
			if ($scope.userForm.$valid) {
				alert('our form is amazing');
			}

		};

	});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

body { padding-top:30px; }

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />