AngularJS Form Validation Example
Simple AngularJS offers client-side form validation.
Simple Client-side validation can not alone secure user input(Not Secured). Server side validation is also necessary(required).
Simple Client-side validation can not alone secure user input(Not Secured). Server side validation is also necessary(required).
Simple Client-side validation can not alone secure user input(Not Secured). Server side validation is also necessary(required).
AngularJS Form Validation
Simple AngularJS offers client-side form validation.
//defining module
var myapp = angular.module('myapp', []);
//creating custom directive
myapp.directive('ngCompare', function () {
return {
require: 'ngModel',
link: function (scope, currentEl, attrs, ctrl) {
var comparefield = document.getElementsByName(attrs.ngCompare)[0]; //getting first element
compareEl = angular.element(comparefield);
//current field key up
currentEl.on('keyup', function () {
if (compareEl.val() != "") {
var isMatch = currentEl.val() === compareEl.val();
ctrl.$setValidity('compare', isMatch);
scope.$digest();
}
});
//Element to compare field key up
compareEl.on('keyup', function () {
if (currentEl.val() != "") {
var isMatch = currentEl.val() === compareEl.val();
ctrl.$setValidity('compare', isMatch);
scope.$digest();
}
});
}
}
});
// create angular controller
myapp.controller('mainController', function ($scope) {
$scope.countryList = [
{ CountryId: 1, Name: 'India' },
{ CountryId: 2, Name: 'USA' }
];
$scope.cityList = [];
$scope.$watch('user.country', function (newVal,oldVal) {
if (newVal == 1)
$scope.cityList = [
{ CountryId: 1, CityId: 1, Name: 'Gujrat' },
{ CountryId: 1, CityId: 2, Name: 'Delhi' },
{ CountryId: 1, CityId: 3, Name: 'Ahemdabad' }];
else if (newVal == 2)
$scope.cityList = [
{ CountryId: 2, CityId: 3, Name: 'Texas' },
{ CountryId: 2, CityId: 4, Name: 'NewYork' }];
else
$scope.cityList = [];
});
// function to submit the form after all validation has occurred
$scope.submitForm = function () {
// Set the 'submitted' flag to true
$scope.submitted = true;
if ($scope.userForm.$valid) {
alert("Form is valid!");
}
else {
alert("Please correct errors!");
}
};
});
.help-block{color:red;}