Can anyone help me figure out why I keep getting a red color underline error even though there is no actual error and validation is successful?
https://i.sstatic.net/AESLl.png
I created my own directive to validate passwords and I am using Angular material.
For the working code, click here: http://codepen.io/anon/pen/gPrMRM
Here is the Angular app and JS:
angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function ($scope) {
$scope.project = {
description: 'Nuclear Missile Defense System',
rate: 500
};
})
.directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.projectForm.password.$viewValue;
scope.projectForm.password.$error = {};
ctrl.$setValidity('noMatch', !noMatch);
console.log("scope.projectForm.password.$error: ");
console.dir(scope.projectForm.password.$error);
})
}
}
});
In the HTML:
<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
<md-content layout-padding="">
<form name="projectForm">
<md-input-container class="md-block">
<label>Client Email</label>
<input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/">
<div ng-messages="projectForm.clientEmail.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label for="password">Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" required />
<div ng-messages="projectForm.password.$error" ng-show="projectForm.password.$touched || projectForm.$submitted">
<div ng-message="required">required.</div>
<div ng-message="minlength">Passwords must be between 8 and 20 characters.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required />
<div ng-messages="projectForm.password_c.$error" ng-show="projectForm.password_c.$touched || projectForm.$submitted">
<div ng-message="required">Please confirm your password.</div>
<div ng-message="noMatch">Passwords do not match.</div>
</div>
<br /><br /><br />
<pre>projectForm.password.$error = {{ projectForm.password.$error | json }}</pre>
<pre>projectForm.password.$touched = {{ projectForm.password.$touched | json }}</pre>
<br />
<pre>projectForm.password_c.$error = {{ projectForm.password_c.$error | json }}</pre>
<pre>projectForm.password_c.$touched = {{ projectForm.password_c.$touched | json }}</pre>
</md-input-container>
</form>
</md-content>
</div>
Working Code Here: http://codepen.io/anon/pen/gPrMRM