Form Validation With Angular

Refresher Questions

0. What is form validation?

 

1. Why do we do form validation?

 

2. Why isn't client side form validation enough?

 

Step 0: Setup Angular

<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="app.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    </head>
    <body ng-app="app" ng-controller="FormCtrl">
    </body>
</html>
angular.module("app", [])
.controller("FormCtrl", function($scope) {

	$scope.user = {};

	$scope.submitForm = function(submittedForm) {
		console.log("form submitted", submittedForm);
	}
});

We need an app and a controller as well as an object to hold the form values: $scope.user

Step 1: Submit Event

<form name="userForm" ng-submit="submitForm(userForm)"> 
  
  <label for="username">User Name: </label>
  <input type="text" id="username" name="username">
  
  <label for="email">Email: </label>
  <input type="text" id="email" name="email">
  <input type="submit" value="Click me!">
</form>

Hijack the submit event with name && ng-submit

With Angular, we're going to submit the form in a controller function instead of using the standard action+method HTML.

Step 2: ng-model

<form name="userForm" ng-submit="submitForm(userForm)"> 
  
  <label for="username">User Name: </label>
  <input type="text" id="username" name="username" 
         ng-model="user.username">
  
  <label for="email">Email: </label>
  <input type="email" id="email" name="email" 
         ng-model="user.email">
  
  <input type="submit" value="Click me!">
</form>

Like everything in Angular, the interactions are powered by data bindings. Give each of your form values an ng-model.

Step 3: Use Directives

<form name="userForm" ng-submit="submitForm(userForm)"> 
  
  <label for="username">Username: </label>
  <input type="text" id="username" 
  		 ng-model="user.username" 
  		 ng-required="true" 
  		 ng-minlength="3">
  
  <label for="email">Email: </label>
  <input type="email" id="email" 
         ng-model="user.email"
         ng-required="true">
  
  <input type="submit" value="Click me!">
</form>

Angular supports various validation directives such as ng-required, and ng-minlength. Angular also supports HTML validation like type="email"

Step 4: Use $valid et al

<form name="userForm" ng-submit="submitForm(userForm)"> 
  
  <label for="username">Username: </label>
  <input type="text" id="username" 
  		 ng-model="user.username" 
  		 ng-required="true" 
  		 ng-minlength="3">
  
  <label for="email">Email: </label>
  <input type="email" id="email" 
         ng-model="user.email"
         ng-required="true">
  
  <!-- only show the submit button once the form is valid -->
  <input type="submit" value="Click me!" ng-show="userForm.$valid">
</form>

Angular gives our form, and each input, a $valid property which we can use in our controller or view

Step 4: Use $valid et al

var app = angular.module("app", [])
app.controller("FormCtrl", function($scope) {

	$scope.user = {};

	$scope.submitForm = function(submittedForm) {
		console.log($scope.userForm === submittedForm);
		console.log(submittedForm.$valid);
		console.log($scope.user);
	}
         
        /* 
        true
        true 
        Object { username: "teb", email: "teb@gmail.com" } 
        */
});

Note that submittedForm is the same object as $scope.userForm.

Step 4: Use $valid et al

var app = angular.module("app", [])
app.controller("FormCtrl", function($scope) {

	$scope.user = {};

	$scope.submitForm = function(submittedForm) {
		console.log($scope.userForm.email);
	}
         
        /* 
        Object { $viewValue: "teb311@gmailc", $modelValue: "teb311@gmailc", $$rawModelValue: "teb311@gmailc", ...}
        */
});

Note that $scope.userForm.email (and $scope.userForm.username) are special.

Step 5: Get Fancy

<span ng-show="userForm.username.$error.minlength">
    Username isn't long enough
</span>

<span ng-show="userForm.email.$ && !userForm.email.$pristine">
    Enter a valid email!
</span>

<input type="text" id="username" name="username"
       ng-model="user.username ng-required="true" 
       ng-minlength="3" 
       ng-class={'pristine': userForm.username.$pristine, 
                 'error': userForm.username.$invalid,
                 'valid': userForm.username.$valid}">

There are *tons* of ways to use the form validation properties -- get cute with it

Checkout a *very* cute example

https://github.com/gSchool/angular-curriculum/tree/master/Unit-1/examples/form_validation_example

Questions?

Copy of Form Validation With Angular

By Lionel Lints

Source: Tyler Bettilyon

Copy of Form Validation With Angular

  • 772

More from Lionel Lints