How to revalidate a form with multiple dependent fields? - angularjs

I'm fairly new to Angular. I have a form where the user need to assign port numbers to 9 different port input fields (context: it's a form for a server environment configuration). The validation requirement is that no port number can be assigned twice, so each of the 9 port numbers needs to be unique.
For that, I have a custom validation directive called "srb-unique-port", which I assign to my input fields.
Directive:
(function () {
'use strict';
angular
.module('account')
.directive('srbUniquePort', [srbUniquePort]);
function srbUniquePort() {
return {
restrict: 'A',
require: 'ngModel',
scope: true,
link: function (scope, element, attrs, ngModel) {
ngModel.$validators.srbUniquePort = function (val) {
if (val == null || val == undefined || val == "" || val==0) return true;
var fieldName = attrs.name;
var configuration = scope.$eval(attrs.srbUniquePort);
var portFieldsToCheck = [
"myRestServicePort",
"myRestServicePortSSL",
"alfrescoPortHttp",
"alfrescoPortHttps",
"alfrescoPortTomcatShutdown",
"alfrescoPortAJP",
"alfrescoPortMySql",
"alfrescoPortJOD",
"alfrescoPortVti"
];
for (var i = 0; i < portFieldsToCheck.length; i++) {
if (fieldName!=portFieldsToCheck[i] && configuration[portFieldsToCheck[i]] == val) {
return false;
}
}
return true;
}
}
}
}
})();
HTML form (excerpt, just showing 2 of the 9 fields):
...
<md-input-container>
<label for="company" translate>COMPANY.CONFIGURATION.DBLIB_WEB_SRVC_PORT</label>
<input ng-model="vm.configuration.dblibWebSrvcPort" name="dblibWebSrvcPort" srb-unique-port="vm.configuration">
<div ng-messages="configurationForm.dblibWebSrvcPort.$error">
<div ng-message when="srbUniquePort">
<span translate>COMPANY.CONFIGURATION.VALIDATION.PORT_NOT_UNIQUE</span>
</div>
</div>
</md-input-container>
<md-input-container>
<label for="company" translate>COMPANY.CONFIGURATION.DBLIB_WEB_SRVC_PORT_SSL</label>
<input ng-model="vm.configuration.dblibWebSrvcPortSLL" name="dblibWebSrvcPortSLL" srb-unique-port="vm.configuration">
<div ng-messages="configurationForm.dblibWebSrvcPortSLL.$error">
<div ng-message when="srbUniquePort">
<span translate>COMPANY.CONFIGURATION.VALIDATION.PORT_NOT_UNIQUE</span>
</div>
</div>
</md-input-container>
...
It basically works for the field that I am current entering a value into. But the problem is that when I change the value of one input field, I need to re-validate all other depending fields as well. But I am not sure what the best way is in order to not run into an endless loop here, since all fields have the "srb-unique-port" assigned.
I already looked on StackOverflow and found this very similar question:
Angular directive with scope.$watch to force validation of other fields
with this plunker sample code:
http://plnkr.co/edit/YnxDDAUCS2K7KyXT1AXP?p=preview
but the example provided there is different: it's only about a password and a password repeat field, where only one field has the validation directive assigned.
So it differs from my case.
I tried to add this in my above code:
scope.$watch(ngModel, function (newValue, oldValue) {
ngModel.$validate();
});
but this causes endless loops (why does the ngModel frequently change here without any further action other than a validation which should always result to the same?).

This is the solution I ended up with. Looks a bit hacked to me, but it works.
(function () {
'use strict';
angular
.module('account')
.directive('srbUniquePort', [srbUniquePort]);
function srbUniquePort() {
return {
restrict: 'A',
require: 'ngModel',
scope: true,
link: function (scope, element, attrs, ngModel) {
function hasAValue(field) {
return !!field;
}
ngModel.$validators.srbUniquePort = function (val) {
var fieldName = attrs.name;
var configuration = scope.$eval(attrs.srbUniquePort);
var portFieldsToCheck = [
"dblibWebSrvcPort",
"dblibWebSrvcPortSLL",
"myRestServicePort",
"myRestServicePortSSL",
"alfrescoPortHttp",
"alfrescoPortHttps",
"alfrescoPortTomcatShutdown",
"alfrescoPortAJP",
"alfrescoPortMySql",
"alfrescoPortJOD",
"alfrescoPortVti"
];
configuration[fieldName] = val;
if (scope.$parent.configuration == undefined) {
scope.$parent.configuration = JSON.parse(JSON.stringify(configuration));
}
scope.$parent.configuration[fieldName] = val;
// compare each port field with each other and in case if equality,
// remember it by putting a "false" into the validityMap helper variable
var validityMap = [];
for (var i = 0; i < portFieldsToCheck.length; i++) {
for (var j = 0; j < portFieldsToCheck.length; j++) {
if (portFieldsToCheck[i] != portFieldsToCheck[j]) {
var iFieldHasAValue = hasAValue(scope.$parent.configuration[portFieldsToCheck[i]]);
var jFieldHasAValue = hasAValue(scope.$parent.configuration[portFieldsToCheck[j]]);
var valHasAValue = hasAValue(val);
if (iFieldHasAValue && jFieldHasAValue
&& scope.$parent.configuration[portFieldsToCheck[i]] == scope.$parent.configuration[portFieldsToCheck[j]]
) {
validityMap[portFieldsToCheck[i]] = false;
validityMap[portFieldsToCheck[j]] = false;
}
}
}
}
// in the end, loop through all port fields and set
// the validity here manually
for (var i = 0; i < portFieldsToCheck.length; i++) {
var valid = validityMap[portFieldsToCheck[i]];
if (valid == undefined) valid = true;
ngModel.$$parentForm[portFieldsToCheck[i]].$setValidity("srbUniquePort", valid);
}
// ending with the standard validation for the current field
for (var i = 0; i < portFieldsToCheck.length; i++) {
if (fieldName != portFieldsToCheck[i] && configuration[portFieldsToCheck[i]] == val) {
return false;
}
}
return true;
}
}
}
}
})();

Related

directive that controlls upvotes and downvotes

I'm developing a upvote/downvote controlling system for a dynamic bunch of cards.
I can controll if I click to the img the checked = true and checked = false value but The problem I've found and because my code doesn't work as expected is I can't update my value in the ng-model, so the next time the function is called I receive the same value. As well, I can't update and show correctly the new value. As well, the only card that works is the first one (it's not dynamic)
All in which I've been working can be found in this plunk.
As a very new angular guy, I tried to investigate and read as much as possible but I'm not even 100% sure this is the right way, so I'm totally open for other ways of doing this, attending to performance and clean code. Here bellow I paste what I've actually achieved:
index.html
<card-interactions class="card-element" ng-repeat="element in myIndex.feed">
<label class="rating-upvote">
<input type="checkbox" ng-click="rate('upvote', u[element.id])" ng-true-value="1" ng-false-value="0" ng-model="u[element.id]" ng-init="element.user_actions.voted === 'upvoted' ? u[element.id] = 1 : u[element.id] = 0" />
<ng-include src="'upvote.svg'"></ng-include>
{{ element.upvotes + u[1] }}
</label>
<label class="rating-downvote">
<input type="checkbox" ng-click="rate('downvote', d[element.id])" ng-model="d[element.id]" ng-true-value="1" ng-false-value="0" ng-init="element.user_actions.voted === 'downvoted' ? d[element.id] = 1 : d[element.id] = 0" />
<ng-include src="'downvote.svg'"></ng-include>
{{ element.downvotes + d[1] }}
</label>
<hr>
</card-interactions>
index.js
'use strict';
var index = angular.module('app.index', ['index.factory']);
index.controller('indexController', ['indexFactory', function (indexFactory) {
var data = this;
data.functions = {
getFeed: function () {
indexFactory.getJSON(function (response) {
data.feed = response.index;
});
}
};
this.functions.getFeed();
}
]);
index.directive('cardInteractions', [ function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.rate = function(action, value) {
var check_up = element.find('input')[0];
var check_down = element.find('input')[1];
if (action === 'upvote') {
if (check_down.checked === true) {
check_down.checked = false;
}
} else {
if (action === 'downvote') {
if (check_up.checked === true) {
check_up.checked = false;
}
}
}
}
}
};
}]);
Hope you guys can help me with this.
Every contribution is appreciated.
Thanks in advice.
I have updated your directive in this plunker,
https://plnkr.co/edit/HvcBv8XavnDZTlTeFntv?p=preview
index.directive('cardInteractions', [ function () {
return {
restrict: 'E',
scope: {
vote: '='
},
templateUrl: 'vote.html',
link: function (scope, element, attrs) {
scope.vote.upValue = scope.vote.downValue = 0;
if(scope.vote.user_actions.voted) {
switch(scope.vote.user_actions.voted) {
case 'upvoted':
scope.vote.upValue = 1;
break;
case 'downvoted':
scope.vote.downValue = 1;
break;
}
}
scope.upVote = function() {
if(scope.vote.downValue === 1) {
scope.vote.downValue = 0;
scope.vote.downvotes--;
}
if(scope.vote.upValue === 1) {
scope.vote.upvotes++;
} else {
scope.vote.upvotes--;
}
};
scope.downVote = function() {
if(scope.vote.upValue === 1) {
scope.vote.upValue = 0;
scope.vote.upvotes--;
}
if(scope.vote.downValue === 1) {
scope.vote.downvotes++;
} else {
scope.vote.downvotes--;
}
};
}
};

Field update after autocompletion with angularJS

I'm quite new to AngularJS and struggling a bit to have some input fields updated after an autocompletion event using google maps.
The idea is that when the user inputs his city/zip code, I would update 3 fields which are themselves linked to an object.
So far, I managed to have a working code except that sometimes the fields are not updated immediately : I have to autocomplete twice so that the good value will appear in the fields.
I've tweaked an existing angular directive in order to get what I want but since this is new to me, I dont know if I'm using the correct approach.
Below is the JS directive I use :
angular.module( "ngVilleAutocomplete", [])
.directive('ngAutocomplete', function($parse) {
return {
scope: {
details: '=',
ngAutocomplete: '=',
options: '=',
data: '='
},
link: function(scope, element, attrs, model) {
//options for autocomplete
var opts
//convert options provided to opts
var initOpts = function() {
opts = {}
if (scope.options) {
if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
}
if (scope.options.bounds) {
opts.bounds = scope.options.bounds
}
if (scope.options.country) {
opts.componentRestrictions = {
country: scope.options.country
}
}
}
}
initOpts()
//create new autocomplete
//reinitializes on every change of the options provided
var newAutocomplete = function() {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
//console.log(scope.details)
var HasCP = false;
for (var i=0 ; i<scope.details.address_components.length ; i++){
for (var j=0 ; j<scope.details.address_components[i].types.length ; j++){
if (scope.details.address_components[i].types[j] == 'postal_code' && scope.data.CP != 'undefined'){
scope.data.CP = scope.details.address_components[i].long_name;
HasCP = true;
} else if (scope.details.address_components[i].types[j] == 'locality' && scope.data.Ville != 'undefined') {
scope.data.Ville = scope.details.address_components[i].long_name;
} else if (scope.details.address_components[i].types[j] == 'country' && scope.data.Pays != 'undefined') {
scope.data.Pays = scope.details.address_components[i].long_name;
}
}
}
if (!HasCP){
var latlng = {lat: scope.details.geometry.location.lat(), lng: scope.details.geometry.location.lng()};
var geocoder = new google.maps.Geocoder;
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
for (var i=0 ; i<results[0].address_components.length ; i++){
for (var j=0 ; j<results[0].address_components[i].types.length ; j++){
if (results[0].address_components[i].types[j] == 'postal_code' && scope.data.CP != 'undefined'){
scope.data.CP = results[0].address_components[i].long_name;
console.log('pc trouvé :' + scope.data.CP);
}
}
}
}
});
}
//console.log(scope.data)
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete()
//watch options provided to directive
scope.watchOptions = function () {
return scope.options
};
scope.$watch(scope.watchOptions, function () {
initOpts()
newAutocomplete()
element[0].value = '';
scope.ngAutocomplete = element.val();
}, true);
}
};
});
The matching HTML code is below :
<div class="form-group">
<lable>Code postal : </label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="cities_autocomplete" details="cities_autocomplete_details" options="cities_autocomplete_options" data="client" placeholder="Code postal" ng-model="client.CP" />
</div>
<div class="form-group">
<lable>Ville : </label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="cities_autocomplete" details="cities_autocomplete_details" options="cities_autocomplete_options" data="client" placeholder="Ville" ng-model="client.Ville" />
</div>
<div class="form-group">
<lable>Pays : </label>
<input type="text" class="form-control" name="Pays" ng-model="client.Pays" placeholder="Pays" />
</div>
You'll see that I pass the "client" object directly to my directive which then updates this object. I expected angular to update the html page as soon as the values of the client object are updated but I will not always be the case :
If I search twice the same city, the values are not updated
If I search a city, Google wont send me a zip code so I have to do another request to the geocoding service and I get the zipcode in return but while my client.CP field is correctly updated, changes are not visible in the CP input field until I do another search.
Thanks in advance for any advice on what I'm doing wrong.

remove $error message from several input fields in the form using directive

I have several fields in the form:
<input name="participant{{$index}}email" type="email" ng-model="participant.email" ng-trim="true"
required ng-minlength="1" ng-maxlength="255"
email-uniqueness-validator="{{$index}}">
I use the emailUniquenessValidator directive to check if any participant entered the same email. If so I display error message:
<div ng-messages="enroll['participant' + $index + 'email'].$error">
<div ng-message="emailUniqueness">The email addresses must be different for every applicant...</div>
</div>
The problem is when I have two fields with the same email and both of them show error. Then user edits one email so it's different than any other email and the error message on the field disappears as expected, but how can I remove the error message from the second email field that became unique by editing the first email field?
The directive:
.directive('emailUniquenessValidator',
function() {
return {
require : 'ngModel',
link: function (scope, element, attrs, ngModel) {
scope.$watch(attrs.ngModel, function () {
var currentEmailFieldNo = attrs.emailUniquenessValidator;
var diffEmails = differentEmails(scope, currentEmailFieldNo);
ngModel.$setValidity('emailUniqueness', diffEmails);
if (!diffEmails) {//one field has changed and there is no duplicates, but we need to remove validation errors from the other field
cleanDuplicateEmailErrors(scope);
}
});
}
}
});
differentEmails function:
function differentEmails(scope, currentEmailFieldNo) {
differentEmails = true;
var currentEmail = currentEmailFieldNo >= 0
? scope.applicantEnrollDto.participants[currentEmailFieldNo].email
: scope.applicantEnrollDto.email;
var mainEmail = scope.applicantEnrollDto.email;
if (currentEmailFieldNo < 0) {
if (emailInArray(currentEmail, scope.applicantEnrollDto.participants)) {
differentEmails = false;
}
} else {
var applicantsNo = scope.applicantEnrollDto.participants.length
var differentEmails = true;
if (applicantsNo) {
differentEmails = !hasDuplicates(scope.applicantEnrollDto.participants);
if (differentEmails) {
if (currentEmail === mainEmail) {
differentEmails = false;
}
}
}
}
return differentEmails;
}
The problem was solved easily by accessing form in the scope
$scope.form["participant"+i+"email"].$setValidity('emailUniqueness', errorsOff);

Update view with formatted value, model with numeric value

I have a need for input boxes to display values formatted based on the user's locale but the model must store the value in en-US locale and all of this happens on blur. I've got the formatting of the fields working when the user clicks off of them but I cannot figure out how to set the model value. In my code formatedValue is being set correctly for the user to view but how do I update the model value to be "valueToFormat"? I've tried
scope.$modelValue = valueToFormat;
and it works when watching it thru the debugger but as soon as the view is rendered the value reverts to the $viewValue. How can I accomplish this?
element.bind('blur', function () {
var val = ctrl.$modelValue;
parse(val);
})
ctrl.$formatters.push(function(value) {
if(!value) {
return value;
}
var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals, '%') || '0';
return viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
});
function parse(value) {
if(!value) {
return value;
}
var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals) || '0';
var formatedValue = viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
var actualNumber = parseFloat(modelMask.apply(valueToFormat));
ctrl.$viewValue = formatedValue;
ctrl.$render();
return valueToFormat;
}
You should be able to use a filter to solve this issue. For example this is a date filter that we use. This is with typescript so a little tweaking will be necessary for straight java-script but it gets the point across.
app.filter('MyDateFilter', ['$filter', function ($filter: ng.IFilterService)
{
return function (value:any, format)
{
if (typeof value == "string")
{
var stringValue = <string>value;
//If there is no / or - then assume its not a date
if (stringValue.indexOf('/') == -1 && stringValue.indexOf('-') == -1)
return value;
}
var parsedDate = Date.parse(value);
if (isNaN(parsedDate))
return value;
else
return $filter('date')(value, format);
}
}]);
And then in the html.
<div ng-repeat="value in values" >
{{value | MyDateFilter:"MM/dd/yyyy" }}
</div>
Since it seems like you want to change an input display value. here is a solution we use for that. I created a custom directive and inside of there you can manipulte the $render. So:
app.directive("myDateDisplayInput", ['$filter', function DatepickerDirective(filter: ng.IFilterService): ng.IDirective
{
return {
restrict: 'A',
require: 'ngModel',
link: (scope: ng.IScope, element, attrs, ngModelCtrl: ng.INgModelController) =>
{
ngModelCtrl.$render = () =>
{
var date = ngModelCtrl.$modelValue ?
filter('date')(ngModelCtrl.$modelValue, "MM/dd/yyyy") :
ngModelCtrl.$viewValue;
jqueryElement.val(date);
};
}
};
}
This will format the value to be what you want. If you only want this to happen on blur then you add
ng-model-options="{ updateOn: 'blur' }"
<input type="text" my-date-display-input ng-model-options="{ updateOn: 'blur' }" ng-model="unformattedDate"/>
Some pieces might be missing but this should get the idea across.

Why is ng-maxlength not re-evaluated?

I have a form, that has one input field and three check boxes. Depending on which check box is selected the max length on the field needs to change. I have a input field defined like this
<input placeholder="ID" type="text" id="form_ID" name="searchId" autofocus
data-ng-model="vm.searchCriteria.searchId" data-ng-required="vm.isSearchIdRequired"
data-ng-minlength="1" data-ng-maxlength="{{searchIdMaxLength}}"
data-ng-class="{'input-error': vm.isSearchIdValid}">
and one of the checkboxes
<input type="checkbox" id="checkbox1" class="hidden-field"
data-ng-model="vm.searchCriteria.searchIdInSrId" data-ng-checked="vm.searchCriteria.searchIdInSrId"
data-ng-change="processSearchIdOptionsChange()">
So everytime user changes which checkbox is/are selected processSearchIdOptionsChange gets called, and searchIdMaxLength changes it's value. This is all working fine and I can see the value being changed on the $scope. But, my initial max length is still being applied. Following error pops up after initial max number of chars is reached. Why?
<span class="error" data-ng-show="(searchForm.$dirty && searchForm.searchId.$error.maxlength)">Too long!</span>
This is the intended behaviour of ng-maxlength. Verified from source : https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js?source=c#L523
The value is parsed only once and cached :
var maxlength = int(attr.ngMaxlength);
If you want to observe the change you need to create your own directive which uses something like
scope.$watch(attr.namespaceMaxLength,function(){
// clear old validator. Add new one.
})
After a lot of trial and error here is the directive that does what I need. Please if you have any suggestions or improvements share them, I have only 7 days of angular under my belt, and javascript is something that i have a cursory knowledge of.
(function () {
'use strict';
angular.module('commonModule')
.directive('srMaxlength', ['$window', srMaxlength]);
function srMaxlength($window) {
// Usage:
// use if you need to switch max length validation dynamically based on
// Creates:
// removes old validator for max length and creates new one
var directive = {
require: 'ngModel',
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs, ctrl) {
attrs.$observe("srMaxlength", function (newval) {
var maxlength = parseInt(newval, 10);
var name = "srMaxLengthValidator";
for (var i = ctrl.$parsers.length - 1; i >= 0; i--) {
if (ctrl.$parsers[i].name !== undefined && ctrl.$parsers[i].name == name) {
ctrl.$parsers.splice(i, 1);
}
}
for (var j = ctrl.$formatters.length - 1; j >= 0; j--) {
if (ctrl.$formatters[j].name !== undefined && ctrl.$formatters[j].name == name) {
ctrl.$formatters.splice(j, 1);
}
}
ctrl.$parsers.push(maxLengthValidator);
ctrl.$formatters.push(maxLengthValidator);
//name the function so we can find it always by the name
maxLengthValidator.name = name;
function maxLengthValidator(value) {
if (!ctrl.$isEmpty(value) && value.length > maxlength) {
ctrl.$setValidity('maxlength', false);
return undefined;
} else {
ctrl.$setValidity('maxlength', true);
return value;
}
}
});
}
}
})();

Resources