Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Not able to validate forms with isolate scope inputs #37

Closed
facultymatt opened this issue May 20, 2015 · 4 comments
Closed

Not able to validate forms with isolate scope inputs #37

facultymatt opened this issue May 20, 2015 · 4 comments

Comments

@facultymatt
Copy link

I have a directive that creates inputs. Something like:

module.directive('ci', function() {
  return {
    scope: {
      model: '=ciModel',
      name: '@ciName',
      validation: '@ciValidation'
    },
    template: '<input validate="{{validate}}" name="{{name}}" ng-model="{{model}}" />'
  }
});

I use this in my form to generate inputs, like so:

<form name="userForm">
    <div ci ci-name="website" ci-validation="url|required" ci-model="user.website"></div>
</form>

This causes errors when I try to validate in my controller, like so:

var isValid = new validationService().checkFormValidity($scope.startForm);
// ERROR: checkFormValidity() requires a valid Angular Form or $scope object passed as argument to function properly (ex.: $scope.form1  OR  $scope).

If I include the inputs in my form without using the custom directive, the form validates properly.

I get why this happens... but is there a workaround for this? Or another best practice for this case?

@facultymatt
Copy link
Author

I checked out the more examples with dynamic inputs. Here is more info on my situation.

The form correctly reports its valid state, like this:

console.log(userForm.$invalid) // false

And when I correctly enter data, the output changes to read true.

This is because in the check on this line $validationSummary is not set.

In fact, If I inspect scope I see that $validationSummary is nested within:

$scope.$$nextSibling.$validationSummary

And If I use ngInclude $validationSummary gets completely lost!

@ghiscoding
Copy link
Owner

In reality I did not play much with dynamic inputs, and every time I did, I already had a Form. Without a valid Form, I simply cannot run the checkFormValidity() because it's based on that fact. If your form is dynamic as well, it's harder and in this case you can look at the more-examples inside the dynamicForm-app.js, at the bottom completely there's the function: $scope.validate=function(), I got it working inside there for another user but I am not crazy about the fact that you need the debug mode to be enable for this to work.

If you have multiple forms on the page, the $scope.validationSummary will have a full set of all invalid fields for all the forms, while on the other hand the $scope.yourFormName.$validationSummary will hold only the errors of that form, so it's more suggested to use that one.

@ghiscoding
Copy link
Owner

I'm actually facing this problem right now when using it inside a modal window (with Angular-UI Modal), it doesn't seem to be using the same scope because of an isolate scope. So I'm looking into having the possibility to pass your own scope to the Angular-Validation, something like this:

$scope.$validationOptions = { scope: yourScope };

I'm on the proof of concept with this in my modal window, but it seems to work so far... any comments?

ghiscoding added a commit that referenced this issue Jun 3, 2015
- Added possibility to use own isolated scope (issue #37 and #26).
- Fixed an implementation issue found from last revision (issue #35).
- Fixed email validation (issue #38).
- Fixed a performance issue found with onBlur which would run as much
validations as there was characters inside the input when onBlur was
called (abcdef => would make 6 validations) and this was extremely
costly with a Remote validation call.
- Update the code of Remote validation to also accept the "As" alias
"remote:vm.customRemoteValidation".
- Finally added and updated a few Protractor tests to cover all of the
above and more.
@ghiscoding
Copy link
Owner

This should be fixed now, I had this issue with a Modal window and now this new fix works perfectly with version 1.3.27. See the Wiki - Isolated Scope

Let me know if there is anything wrong with it.
Thanks

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants