A
form contains the collection of controls like input text-box, number text, email
text and checkbox etc.
When
we submit to form that time we need to validate first and then submit to it. If input is not passed validations. It will
return an errors message automatically to the user.
var app = angular.module('formApp', []); app.controller('formCtrl', function ($scope) { $scope.sendForm = function () { alert('Form Is submited'); }; $scope.getClass = function (color) { return color.toString(); } });
The HTML code-sample
<div ng-app="formApp" ng-controller="formCtrl"> <h3>Form validation demo app in AngularJs</h3> <form name="personForm" ng-submit="sendForm()"> <div> <label for="name">Name</label> <input id="name" name="name" type="text" ng-model="person.name" required /> <span class="error" ng-show="personForm.name.$error.required">Required!</span> </div> <div class="space"></div> <div> <label for="adress">Adress</label> <input id="address" name="address" type="text" ng-model="person.address" required /> <span class="error" ng-show="personForm.address.$error.required">Required!</span> </div> <div class="space"></div> <div> <label for="contact">Contact No</label> <input id="mobile" name="mobile" type="number" ng-model="person.mobile" required /> <span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span> <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span> </div> <div class="space"></div> <div> <label for="email">Email</label> <input id="email" name="email" type="email" ng-model="person.email" required /> <span class="error" ng-show="personForm.email.$error.required">Required!</span> <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span> </div> <div class="space"></div> <div> <input type="checkbox" ng-model="terms" name="terms" id="terms" required /> <label for="terms">I Agree to the terms.</label> <span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span> </div> <div class="space"></div> <div> <button type="submit">Submit Form</button> </div> </form> </div>
The CSS code-sample
<style> .valid.false { background: red; } .valid.true { background: green; } .error { color: red; } </style>
The Full Live demo code-sample
<!doctype html> <html> <head> <meta charset="utf-8"> <style> .valid.false { background: red; } .valid.true { background: green; } .error { color: red; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> <script> var app = angular.module('formApp', []); app.controller('formCtrl', function ($scope) { $scope.sendForm = function () { alert('Form Is submited'); }; $scope.getClass = function (color) { return color.toString(); } }); </script> </head> <body ng-app="formApp" ng-controller="formCtrl"> <h3>Form validation demo app in AngularJs</h3> <form name="personForm" ng-submit="sendForm()"> <div> <label for="name">Name</label> <input id="name" name="name" type="text" ng-model="person.name" required /> <span class="error" ng-show="personForm.name.$error.required">Required!</span> </div> <div class="space"></div> <div> <label for="adress">Adress</label> <input id="address" name="address" type="text" ng-model="person.address" required /> <span class="error" ng-show="personForm.address.$error.required">Required!</span> </div> <div class="space"></div> <div> <label for="contact">Contact No</label> <input id="mobile" name="mobile" type="number" ng-model="person.mobile" required /> <span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span> <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span> </div> <div class="space"></div> <div> <label for="email">Email</label> <input id="email" name="email" type="email" ng-model="person.email" required /> <span class="error" ng-show="personForm.email.$error.required">Required!</span> <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span> </div> <div class="space"></div> <div> <input type="checkbox" ng-model="terms" name="terms" id="terms" required /> <label for="terms">I Agree to the terms.</label> <span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span> </div> <div class="space"></div> <div> <button type="submit">Submit Form</button> </div> </form> </body> </html>
The output
Blogger Comment
Facebook Comment