//defining module
var myapp = angular.module('myapp', []);
// create angular controller
myapp.controller('employeeController', function ($scope) {
$scope.countryList = [
{ CountryId: 1, Name: 'India' },
{ CountryId: 2, Name: 'USA' },
{ CountryId: 3, Name: 'AU' }
];
$scope.cityList = [];
$scope.$watch('user.country', function (newVal, oldVal) {
if (newVal == 1)
$scope.cityList = [
{ CountryId: 1, CityId: 1, Name: 'Noida' },
{ CountryId: 1, CityId: 2, Name: 'Chandigarh' },
{ CountryId: 1, CityId: 3, Name: 'Gurgaon' },
{ CountryId: 1, CityId: 4, Name: 'Lucknow' },
{ CountryId: 1, CityId: 5, Name: 'Delhi' }];
else if (newVal == 2)
$scope.cityList = [
{ CountryId: 2, CityId: 6, Name: 'Washington' },
{ CountryId: 2, CityId: 7, Name: 'Texas' },
{ CountryId: 2, CityId: 8, Name: 'Franklin' },
{ CountryId: 2, CityId: 9, Name: 'NewYork' }];
else if (newVal == 3)
$scope.cityList = [
{ CountryId: 3, CityId: 10, Name: 'Brisbane' },
{ CountryId: 3, CityId: 11, Name: 'Perth' },
{ CountryId: 3, CityId: 12, Name: 'Adelaide' },
{ CountryId: 3, CityId: 13, Name: 'Sydney' }];
else
$scope.cityList = [];
});
$scope.submitForm = function () {
$scope.submitted = true;
if ($scope.registrationForm.$valid) {
alert("Form is valid!");
}
else {
alert("Please correct errors!");
}
};
});
//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();
}
});
}
}
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="employeeController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header"><h1>Registration page with AngularJS validation</h1></div>
<!-- FORM :Disabeling HTMLS5 validatoin by using "novalidate" attribute -->
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<!-- Employee Name -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.name.$invalid && (registrationForm.name.$dirty || submitted)}">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Enter Employee Name" ng-required="true">
<p ng-show="registrationForm.name.$error.required && (registrationForm.name.$dirty || submitted)" class="help-block">Employee name is required.</p>
</div>
<!-- Employee username -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.username.$invalid && (registrationForm.username.$dirty || submitted)}">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Enter Employee Username" ng-minlength="3" ng-maxlength="8" ng-required="true">
<p ng-show="registrationForm.username.$error.required && (registrationForm.username.$dirty || submitted)" class="help-block">Username is required.</p>
<p ng-show="registrationForm.username.$error.maxlength && (registrationForm.username.$dirty || submitted)" class="help-block">Username is too long.</p>
<p ng-show="registrationForm.username.$error.minlength && (registrationForm.username.$dirty || submitted)" class="help-block">Username is too short.</p>
</div>
<!-- password -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.password.$invalid && (registrationForm.password.$dirty || submitted)}">
<label>Password</label>
<input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
<p ng-show="registrationForm.password.$error.required && (registrationForm.password.$dirty || submitted)" class="help-block">Your password is required.</p>
</div>
<!-- confirm password -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.confirmPassword.$invalid && (registrationForm.confirmPassword.$dirty || submitted)}">
<label>Confirm Password</label>
<input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
<p ng-show="registrationForm.confirmPassword.$error.required && (registrationForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p>
<p ng-show="registrationForm.confirmPassword.$error.compare && (registrationForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p>
</div>
<!-- email -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.email.$invalid && (registrationForm.email.$dirty || submitted)}">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
<p ng-show="registrationForm.email.$error.required && (registrationForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
<p ng-show="registrationForm.email.$error.email && (registrationForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
</div>
<!-- contactno -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.contactno.$invalid && (registrationForm.contactno.$dirty || submitted) }">
<label>Contact Number</label>
<input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[98]\d{9}$/" maxlength="10">
<p ng-show="registrationForm.contactno.$error.pattern && (registrationForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contact number.</p>
</div>
<!-- country -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.country.$invalid && (registrationForm.country.$dirty || submitted)}">
<label>Country</label>
<select name="country" class="form-control"
ng-model="user.country"
ng-options="country.CountryId as country.Name for country in countryList"
ng-required="true">
<option value=''>Select</option>
</select>
<p ng-show="registrationForm.country.$error.required && (registrationForm.country.$dirty || submitted)" class="help-block">Select country.</p>
</div>
<!-- city -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.city.$invalid && (registrationForm.city.$dirty || submitted)}">
<label>City</label>
<select name="city" class="form-control"
ng-model="user.city"
ng-options="city.CityId as city.Name for city in cityList"
ng-required="true">
<option value=''>Select</option>
</select>
<p ng-show="registrationForm.city.$error.required && (registrationForm.city.$dirty || submitted)" class="help-block">Select city.</p>
</div>
<!-- terms & conditions -->
<div class="form-group" ng-class="{ 'has-error' : registrationForm.terms.$invalid && (registrationForm.terms.$dirty || submitted)}">
<label>Accept Terms & Conditions</label>
<input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" />
<p ng-show="registrationForm.terms.$error.required && (registrationForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<br />
</div>
</body>
</html>
/* Put your css in here */