Not able to validate forms with isolate scope inputs

[facultymatt]

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]

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]

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]

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]

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