AngularJS Form Validation - Disable Submit / Confirm Password Custom Directive
Creates a "UserValidation" module with validation directive to make sure passwords match.
http://thomporter.com
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="myapp">
<form name="myForm">
<label for="email">Use</label>
<input type="number" id="useQty" name="useQty" ng-model="formData.useQty" required/>
<label for="email">Min
</label>
<span ng-show="!myForm.username.$error.required && (myForm.username.$error.minlength || myForm.username.$error.maxlength) && myForm.username.$dirty">Username ust be between 5 and 20 characters.</span>
<br />
<input type="number" id="minQty" name="useQty" min="formData.useQty" ng-model="formData.minQty" required/>
<label for="email">Max</label>
<input type="number" id="useQty" name="useQty" max="formData.useQty" ng-model="formData.minQty" required/>
<label for="email">Email</label>
<input type="email" id="email" name="email" ng-model="formData.email" required/>
<span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
<span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
<br />
<label for="email">Name</label>
<input type="text" id="name" name="name" ng-model="formData.name" required/>
<span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
<br />
<label for="username">Username</label>
<input type="text" id="username" name="username" ng-model="formData.username" ng-minlength="5" ng-maxlength="20" ng-pattern="/^[A-z][A-z0-9]*$/" required />
<span ng-show="myForm.username.$error.required && myForm.username.$dirty">required</span>
<span ng-show="!myForm.username.$error.minLength && !myForm.username.$error.maxLength && myForm.username.$error.pattern && myForm.username.$dirty">Must start with a letter, and contain letters & numbers only.</span>
<span ng-show="!myForm.username.$error.required &&...
JavaScript
var app = angular.module('myapp', ['UserValidation']);
angular.module('UserValidation', []).directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.myForm.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
})