AngularJS, issue on form validation -
i have form user needs enter 2 times email. found on internet (but not able find link anymore) angular code doing wanted. issue when 2 emails same, 1 input still got class
.ng-invalid.ng-dirty
so can't submit form.
my code following:
css:
.ng-invalid.ng-dirty{ border-color: #fa787e; } .ng-valid.ng-dirty{ border-color: #78fa89; }
html:
<div ng-app="myapp"> <form name="formtemplate" novalidate> <input id="email1" type="email" ng-model="currentform.email1" name="email1" required> <span ng-show="formtemplate.email1.$error.required && formtemplate.email1.$dirty">required</span> <span ng-show="!formtemplate.email1.$error.required && formtemplate.email1.$error.email1 && formtemplate.email1.$dirty">invalid email</span> <input id="email2" type="email" name="email2" ng-model="currentform.email2" same-email required> <span ng-show="formtemplate.email2.$error.required && formtemplate.email2.$dirty">please confirm email.</span> <span ng-show="!formtemplate.email2.$error.required && formtemplate.email2.$error.nomatch && formtemplate.email1.$dirty">emails not match.</span> </form> </div>
javascript:
var app = angular.module('myapp', ['uservalidation']); angular.module('uservalidation', []).directive('sameemail', function () { return { require: 'ngmodel', link: function (scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function (viewvalue, $scope) { var nomatch = viewvalue != scope.formtemplate.email1.$viewvalue; ctrl.$setvalidity('nomatch', !nomatch) }) } } })
here jsfiddle: http://jsfiddle.net/malamine_kebe/pq6fw04v/
im update jsfiddle. don't return value ctrl.$parsers.unshift
.
ctrl.$parsers.unshift(function (viewvalue, $scope) { var nomatch = viewvalue != scope.formtemplate.email1.$viewvalue; ctrl.$setvalidity('nomatch', !nomatch); return nomatch; })
updated jsfiddle
Comments
Post a Comment