checkFormValidity(form) is failing with controller as naming.

[rluiten]

Firstly so far loving the library.
What I have setup here.

My controller is aliased "MyController as vm" in web page context.

<form name="vm.myform" ng-submit="vm.submit()">
     <etc>
</form>

In my controller, I have an alias to be vm = this; where this is the controller.

app.controller('MyController', ['validationService', function (validationService) {
  var vm = this;
  vm.submit = function () {
   // this does work
   new validationService().checkFormValidity($scope); 

   // this does work not work I believe it should
   new validationService().checkFormValidity(vm.myform);
  }
}]);

The error I get for the "vm.myform" naming is as follows.

"checkFormValidity() requires a valid Angular Form or $scope object passed as argument to work properly (ex.: $scope.form1  OR  $scope)."

I have used the controller as naming sytnax to access forms in a few other scenarios and never encountered a problem before now.

Not sure this is something you can do anything about but thought i would mention it.
I find the controller as syntax far superior to $scope.

I am currently using angular v1.3.13 and angular-validation 1.3.35.

Cheers,
Rob

[ghiscoding]

Ah I see, unfortunately it really needs a $scope object which is not the same as the As vm alias. It's an Angular limitation, the alias does not hold everything of the $scope. Also in my code with Angular-Validation, when it keeps track of the errors, I save them in 2 places $scope.$validationSummary and $scope.formName.$validationSummary (if the latter exist), but that is really inside the $scope, they don't show up inside the As vm alias... The limitation in Angular is that, the vm does not hold everything of what the $scope does, and I also don't know what the alias is unless you specify it somewhere, so from within the Angular-Validation, I have no way of knowing what the alias is (if there is one).

Actually, the only other way I can think of, is to had an extra property, maybe in the global options , and if supplied then use it as well to save the $validationSummary... actually, scrap that, even the global $validationOptions are defined with the $scope (when using the Directive).

So I don't see an easy way of addressing that one... Unless you know of an easy way in my code to address that, then please share your ideas. Thanks for the feedback

BTW, I also use the As vm in all my code, but I'm still stuck what that scope

[ghiscoding]

I spent some time on this and I think that I actually got a proof of concept working. You will need to pass the alias to the global options with the Service object, even if you just want to use the Directive. The global options also need to be declared before any functions, basically putting on top in the variable declaration is a good place.

So if I take back your code, what I got working so far would look like:

app.controller('MyController', ['validationService', function (validationService) {
  var vm = this;

  // declare the Angular-Validation global options BEFORE the functions declaration
  var myValidation = new validationService({ controllerAs: vm });

  // then after, you can declare your functions
  vm.submit = function () {
     // and use the myValidation Service object previously created outside of this function
     myValidation.checkFormValidity(vm.myform);

     // this would would FAIL because the Directive already processed the validation before reaching your function and getting the controllerAs is already too late.
     new validationService({ controllerAs: vm }).checkFormValidity(vm.myform);
  }
}]);

This look acceptable and seems to work properly as long as you define the global options outside, so you basically can't use anonymous new validationService() anymore (unless you use $scope), so I am probably going to push another version (again) for that if it passes all my Protractor tests.

Let me know what you think about it....

[rluiten]

You make good points for the current behaviour, I understand your initialisation concept and why you need it. It did make me wonder if I have named my form against the controller alias, is it still possible to access the specific form by a name on $scope ?

I did spend some time trying to get a directive to work properly in angular 1.2 a while back with the controller as syntax and was forced to fall back to $scope behaviour as it is more general, so I am not that surprised extra work may or may not be required. There were some changes to 1.3 that would have addressed my problem at the time I believe, but have not revisited it.

As an idle thought what about in the html [which sets same parameter as your initialisation], I am not claiming this is better than your idea, just a different view point, which might be food for thought or suggest other options.

<form name="vm.myform" ng-submit="vm.submit()" ngv-controller="vm" >
     <etc>
</form>

Your work around is interesting, but it raises and interesting point in your setup.
I found it surprising that i had to new the dependency injected value of validationService, I have not see that model before, so far I have it common injected dependencies are already created.
I do not claim to be an expert in angular but have used it in a few cases, just thought I'd query it :).

Rob

[ghiscoding]

Hi Rob, thanks for the feedback, I am currently reviewing the code and testing couple things.

I already use the Global Options for other things, I would rather have the controllerAs being part of that anyway. Passing the controllerAs inside the html as you did with ngv-controller="vm" would possibly work but I find it might actually confuse people if they have to write it twice in the html, I mean first with ng-controller="myController as vm" and second with ngv-controller="vm", it's a little confusing...

validationService is a Service that I created for validating inside a controller (instead of a Directive with DOM only), and since it's a Service, I can easily add functions to it, something I could not do with a Directive (unless you want to pass lot of attributes to your html code, which is ugly).
Doing a new validationService() is just a shortcut, if you are not using it else then no need to create an extra variable for that, just create it as an anonymous object that will die after execution. That's kinda shortcut doesn't work in greater language like C# but since Javascript let go a lot of things, writing a 1 liner is sometime short and sweet hehe

// 2 lines
var myValidation = validationService();
myValidation.checkValidity();

// 1 line...so why not hahah
new validationService().checkValidity();

Also the proof of concept I got here is actually working as well in 1.2, which I just tried. So it's a bonus for that too, I still use 1.2 on some of my code at work. I would rather not break it after updating my code.
So I think that I'll go with what I tested so far, which is what I wrote you just before.

[ghiscoding]

This is a new functionality that was pushed with v1.3.36, so go ahead and use it. :)

[k1ng440]

this issue is still not fixed

https://gyazo.com/d67dbc1f82cb1a25f554ca3a54b04f7a

EDIT:
i am using ui router

[rluiten]

Can you provide an example plnkr of your code, or at the very least how you have set up your config ?
http://plnkr.co/edit/rtSPU8PLzCgx6tARmH2T?p=info <- that is a simple example using the as syntax that works, maybe it can help you, or maybe you can get it to break by adding what your project does ?

[k1ng440]

Hey @rluiten that example does help but the issue is your example doesnt show error like this one here http://plnkr.co/edit/jADq7H?p=preview

EDIT:
never mind i got it working.

[ghiscoding]

So it looks like a false alarm? If my documentation (WiKi) is missing something, then please let me know and I'll update it

[k1ng440]

if validation="" is not in a field its causes that error

and form name is like form="SC.form1"