7

I'm using AngularJS version 1.0.5 and Angular UI (Bootstrap) 0.4.0. I'm trying to integrate 2 features: the tabs of the UI and the forms of Angular.

I have nested forms. One form (outerForm) wraps the whole tabset. The other form (innerForm) resides within one tab.

I want to have a button, outside of the tabs, that will be enabled\disabled according to the validity of the innerForm!

When I try to access innerForm.$valid from outside the form itself, it does not work.

Here is a plunker: http://plnkr.co/edit/sEz8TG?p=preview

Now, when I try the same with regular Bootstrap, it does seem to work: http://plnkr.co/edit/Somic4?p=preview

When the inner form resides within a regular div, I can access it from outside. When I use the special 'tab' syntax of Angular UI, it does not work anymore.

madth3
  • 7,275
  • 12
  • 50
  • 74
Daniel Wolf
  • 213
  • 2
  • 9

1 Answers1

5

The tabset directive is generating a local scope which isn't part of your outer forms scope.

https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L78

In the example that does work, your inner and outer form properties are within the same scope. In order to prove this, I stripped out the outer tabset and tab tag directives show here and it works. When you surround the markup with tabset directives, a new isolated scope is generated in which innerForm is part of.
.

To fix this, you can do a $watch for changes in the form followed by an $emit() (http://docs.angularjs.org/api/ng.$rootScope.Scope) to communicate to the outer scope of the inner scope change in values and validity.

If you are using Chrome, get the Batarang extension which will show you your scope hierarchies

mitch
  • 1,821
  • 14
  • 14
  • Also, make sure you upgrade to the latest Angular Bootstrap. https://github.com/angular-ui/bootstrap/issues/574 Tab compilation was fixed which was causing several issues we were having with weird behavior on forms elements that were inside tabs. – Nate Bundy Aug 31 '13 at 18:01
  • Another option would be to shift the container of "form" object itself, like shown here http://stackoverflow.com/questions/19568761/can-i-access-a-form-in-the-controller . If youre just looking a simple way to access form from base controller, despite the tabset - that's the simpliest option available. – Der Zinger Apr 12 '15 at 15:15