add validation to custom field

[k1ng440]

Hi,
is there anyway to validate based on scope or vm value?

i want to validate this http://isteven.github.io/angular-multi-select/

[ghiscoding]

Not fully sure of what I'm suppose to look at from that page, are you trying to validate the search box?

The only possibility that I see is through Angular-Validation Service which let you attach a validation/validator programmatically, but the Service doesn't currently support attaching a validator to an Angular element. The Service currently ask for an input name and it's mandatory, but your search box doesn't have any. A little bit of code refactoring might give this possibility though.

If you currently look at the Angular-Validation Service, and take a simply example which attach a new validator and we use the declaration through an object, you see that it requires the elmName (else it will throw an error), look at the following piece of code using the elmName:

// inject the validationService inside your Controller
myApp.controller('Ctrl', function ($scope, validationService) {
  // start by creating the service
  var myValidation = new validationService();

  // you can create indepent call to the validation service
  myValidation.addValidator({
    elmName: 'input2',
    debounce: 3000,
    scope: $scope,
    rules: 'numeric_signed|required'
  });

});

I could maybe refactor the code and possibly accept a new property with a new argument name, let's say ngElement and so giving this new property instead of the elmName would be acceptable. The concept would be to use the elmName or to use this new name argument of ngElement, user would need to choose one or the other (but at least 1). As for example, it might look like :

// inject the validationService inside your Controller
myApp.controller('Ctrl', function ($scope, validationService) {
  // start by creating the service
  var myValidation = new validationService();

  // you can create indepent call to the validation service
  myValidation.addValidator({
    ngElement: $scope.input2,  // pass this new argument instead of elmName, it would be 1 or the other but at least 1 of them
   // ngElement: vm.input2  // or with the ControllerAs syntax
    debounce: 3000,
    scope: $scope,
    rules: 'numeric_signed|required'
  });

});

I did not test or refactored anything yet, I only looked briefly at the code and it looks possible though I do not promise anything at this point. But please give feedback before I work on this.

[k1ng440]

the errors are based on the ngModel right?

[ghiscoding]

What errors? I don't understand your question.

This makes me think, I should perhaps call the new argument as ngModel instead of ngElement

[k1ng440]

sorry about the poor question.

my question was if your validator uses ngModel to validate the fields.

angular-multi-select for output output-model="outputBrowsers" (no ngModel).

can you add something that can validate $scope instead of ngModel or ngElement so its can be integrated with other 3rd party lib?

[ghiscoding]

in order to validate an element, it needs to know the element, giving a complete $scope is overkill and it won't know what to do with it... This library is based on the fact that one way or another, you will provide an element to validate against. So if you want to validate, you need to find or know that element, there's a few examples on how to deal with dynamic inputs, dynamic forms and even interpolation... so you can find the element through your Controller or through interpolation, but you need to find it somehow.

[ghiscoding]

Can you make a plunker? I can't get this external library to work.
I'm working on adding 3rd party addon, but I just can't get this angular-multi-select to work.

EDIT
Nevermind, I found how to make it work.

I will soon push some new code, it supports this 3rd party addon that you mentioned and other ones too. I just need to clean the code, add some documentation and make some protractor tests for all that.

[ghiscoding]

Done.. You can check the Wiki - 3rd party addon validation.

I will have a demo soon on Plunker as well, but for now you can look at code sample in the folder /more-examples/addon-3rdParty/ it has 3 different 3rd party addons.

If you use the library and you like it, make sure to click on Star if you haven't done it yet

[ghiscoding]

The Plunker Demo is now available