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">First Name: </label>
<input type="text" id="username" name="username">
<label for="email">Last Name: </label>
<input type="text" id="email" name="username">
<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">Username: </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?
Form Validation With Angular
By Tyler Bettilyon
Form Validation With Angular
- 1,324
