AngularJS : ngShow triggers double in controller - angularjs

Question

I have a problem with the controller triggering the method defined on the $scope twice when the page first loads and when the form submits.
Here's the fiddle : http://jsfiddle.net/scabro/pQb6q/5/
<div data-ng-app="app" data-ng-controller="AppCtrl">
<form method="post" data-ng-submit="submitForm()">
<span data-ng-show="showWarning('email')">Please provide valid email address</span>
<input type="email" name="email" placeholder="Email address" data-ng-model="fields.email.value" />
<span data-ng-show="showWarning('telephone')">Please provide your telephone number</span>
<input type="text" name="telephone" placeholder="Telephone" data-ng-model="fields.telephone.value" />
<span data-ng-show="showWarning('name')">Please provide your name</span>
<input type="text" name="name" placeholder="Name" data-ng-model="fields.name.value" />
<button type="submit">Submit</button>
</form>
</div>
And here are two AngularJs modules - first with with controller and the other with 'isValid' factory service
angular.module('app', ['validation'])
.controller('AppCtrl', function($scope, $log, isValid) {
$scope.fields = {
email : {
type : 'email',
value : '',
required : true
},
telephone : {
type : 'number',
value : '',
required : true
},
name : {
type : 'string',
value : '',
required : true
}
};
$scope.warnings = [];
$scope.showWarning = function(field) {
$log.info($scope.warnings);
return ($scope.warnings.indexOf(field) !== -1);
};
$scope.submitForm = function() {
$scope.warnings = [];
isValid.run($scope.fields);
if (isValid.errors.length > 0) {
$scope.warnings = isValid.errors;
}
};
});
angular.module('validation', [])
.factory('isValid', function() {
return {
errors : [],
isEmail : function(emailValue) {
return (
emailValue.indexOf("#") != -1
);
},
isNumber : function(numberValue) {
return (
!isNaN(parseFloat(numberValue)) &&
isFinite(numberValue)
);
},
isEmpty : function(emptyValue) {
return (
emptyValue === '' ||
emptyValue === 'undefined'
);
},
validateEmail : function(fieldObject, fieldName) {
if (!this.isEmail(fieldObject.value)) {
this.errors.push(fieldName);
}
},
validateNumber : function(fieldObject, fieldName) {
if (!this.isNumber(fieldObject.value)) {
this.errors.push(fieldName);
}
},
validateEmpty : function(fieldObject, fieldName) {
if (this.isEmpty(fieldObject.value)) {
this.errors.push(fieldName);
}
},
type : function(fieldObject, fieldName) {
switch(fieldObject.type) {
case 'email':
if (fieldObject.required || !this.isEmpty(fieldObject.value)) {
this.validateEmail(fieldObject, fieldName);
}
break;
case 'number':
if (fieldObject.required || !this.isEmpty(fieldObject.value)) {
this.validateNumber(fieldObject, fieldName);
}
break;
default:
if (fieldObject.required) {
this.validateEmpty(fieldObject, fieldName);
}
break;
}
},
resetErrors : function() {
this.errors = [];
},
run : function(fields) {
this.resetErrors();
for (var fieldName in fields) {
if (fields.hasOwnProperty(fieldName)) {
this.type(fields[fieldName], fieldName);
}
}
}
};
});
Also - for some reason the validation only work for the first 2 fields and doesn't seem to validate an empty field.
Here's what I'm getting in the console when page first loads (empty arrays) and when the form is first submitted:
it also seem to be calling the showWarning() method with each 'keydown' event when typing inside of any of the fields.
Any idea what might be causing it?

Answer 1

validateEmpty has a spurious ! before this.isEmpty(....
As for why they're getting called twice, I'd guess a digest cycle is running when you submit, and Angular is checking its watches to decide whether to keep showing those spans, but I'm not entirely sure why it's doing that in this case.

Answer 2

You are not using the angular standard validation.
here is an example with a very crud telephone custom validation
<div data-ng-app="app" data-ng-controller="AppCtrl">
<form method="post" name="form" data-ng-submit="submitForm()">
<input required="" type="email" name="email" placeholder="Email address" data-ng-model="fields.email.value" />
<div data-ng-show="form.email.$dirty && form.email.$invalid">Please provide valid email address</div>
<br />
<input required="" valid-telephone type="text" name="telephone" placeholder="Telephone" data-ng-model="fields.telephone.value" />
<div data-ng-show="form.telephone.$dirty && form.telephone.$invalid">Please provide your telephone number</div>
<br />
<input required="" type="text" name="name" placeholder="Name" data-ng-model="fields.name.value" />
<div data-ng-show="form.name.$dirty && form.name.$invalid">Please provide your name</div>
<br />
<button type="submit">Submit</button>
</form>
</div>
angular.module('app', [])
.controller('AppCtrl', function($scope, $log) {
$scope.fields = {
email : {
value : ''
},
telephone : {
value : ''
},
name : {
value : ''
}
};
$scope.submitForm = function() {
};
})
.directive('validTelephone', [function() {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
c.$setValidity('unique', /^\d{10}$/.test(c.$viewValue));
});
}
};
}]);
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
Here is the code
http://plnkr.co/edit/Y9DzmBNlu9wNiJ1Odljc?p=preview
here is some documentation
http://scotch.io/tutorials/javascript/angularjs-form-validation