2

In my application I am using a factory to open different forms in a modal dialog. in the modal-dialog's controller I check if the form is $valid before proceeding with my action's logic.

this was working file with ui-bootstrap $dialog (version 0.5.0) but when upgraded to using the $modal (0.9.0) this no longer works and i'm getting $scope.myForm.$valid = undefined.

I've tried using the $rootScope and passing the $scope from the calling controller but neither work.

Here is a plunker I've created to replicate the issue: (pop open the dialog and hit the Save button)

http://plnkr.co/edit/hLKob1LTzVs8GpOn5vmW?p=preview

can anyone suggest the best way to resolve this?

Thanks, N

nyl66
  • 300
  • 6
  • 14
  • @its not good idea to pass `$scope` to service as argument. You brake Angular rules I think. Services are Singleton. – Maxim Shoustin Jan 09 '14 at 21:09
  • @MaximShoustin has a point. I'd use `resolve` to share any variables that need sharing. – Jesus is Lord Jan 09 '14 at 21:18
  • See gertas answer in this post, very simple and efficient: http://stackoverflow.com/questions/19312936/angularjs-modal-dialog-form-object-is-undefined-in-controller – mvera Oct 08 '14 at 22:33

2 Answers2

1

http://plnkr.co/edit/IvSKpn3OJMp5E0yEkdIu?p=preview

Change

$scope.form.myForm = {};

To

$scope.form = {};
$scope.form.myForm = {};

And it works. Is that what you wanted?

Jesus is Lord
  • 14,971
  • 11
  • 66
  • 97
  • or simply `$scope.form = { myForm: {} };` – Shmiddty Jan 09 '14 at 21:07
  • Out of curiosity, besides potential readability issues (they're both readable to me) are those two initializations equally efficient? – Jesus is Lord Jan 09 '14 at 21:08
  • I doubt there's a noticeable performance difference. The one I posted is less typing? Minifies smaller? – Shmiddty Jan 09 '14 at 21:22
  • your answer is correct, my plunker isn't - I guess I over simplified this scenario but my service is used from a controller of another directive with its own child scope and that is when things break. I will need to fix the plunker to reflect that. – nyl66 Jan 09 '14 at 21:23
  • 1
    I'd assume Shmiddty's alternative is a bit more efficient as there are less property lookups, but we'd be talking about microseconds here. – Fabrício Matté Jan 09 '14 at 21:23
  • my plunker is updated. the issue is that the form object is not accessible from the modal's controller and therefore i'm getting: $scope.myForm.$valid = undefined – nyl66 Jan 10 '14 at 16:47
0

The problem in your code boils down to that myForm simply doesn't exist in the scope you expect it to.

You only get the undefined result because you earlier define myForm to be an empty object with $scope.myForm = {};. When you remove that line, your error will be Cannot read property '$valid' of undefined, as myForm in your scope has no relation at all to the form in the modal.

So where is the form?

The form exists in it's own scope, nested within the scope you expected it to live in. Confused yet?

enter image description here

So how do I access my form?

It is easy to communicate from a child (the scope that holds your form) to a parent, but not the other way around (at least to my knowledge). So you could simply define a method in ModalInstanceCtrl to store a reference to your form like so:

var myForm = null;

$scope.storeForm = function(form) {
  myForm = form;
}

Then invoke that method from within your template myForm.html with {{storeForm(myForm)}}.

You can then access myForm.$valid in your scope.save() method to check if it is valid.

Alternatively, you could pass parameters through the save() invocation itself, like so: save(myForm).

Oliver Salzburg
  • 21,652
  • 20
  • 93
  • 138