Form $dirty and $valid broken with fields inside tabs

[rosslavery]

I'm not sure if this is an implementation issue on my end, or a bug with the tabs directive, but I've asked around and most responses I've gotten seem to indicate it might be the latter.

When form fields are inside tabs, and that tabset is nested inside a <form>, the form's $dirty and $valid properties are not affected by the field(s) inside the tabset.

Plunkr here: http://plunker.co/edit/dCSE1jyLYIWY342mQfAl?p=preview

[pkozlowski-opensource]

@ajoslin I think it might be related to #524
It would be happening if the NgModel can't find the form controller.

[rosslavery]

I can confirm that the fix mentioned by @ajoslin in #524 has fixed this issue for me.

Adding $compile(tab.contentElement)(scope); fixes the issue.

[pkozlowski-opensource]

OK, let's close this as a duplicate of #524 then

[rosslavery]

Thanks for pointing me in that direction, wouldn't have found that otherwise - appreciated.

[rosslavery]

This isn't fixed as I originally thought...

Compiling the tab.contentElement seems to break the bindings on certain fields.

From what I can tell, fields that are nested inside a tab, and then an ng-repeat seem to retain their bindings.

Those that are placed in the tab content area but NOT inside an ng-repeat don't display the values of their models.

[rosslavery]

@pkozlowski-opensource, @ajoslin

Here's a plunker demonstrating the above issue:

http://plunker.co/edit/D6URYjfBQgtQ37nXQS1k?p=preview

Line 2434 of bootstrap.js in that plunker has the fix suggested in #524.

As you can see, on-load the initial value is bound in the "Form details" section, but the input itself doesn't get the value initially.

If you remove the line $compile(tab.contentElement)(scope); then the values are bound, but then the issue regarding $valid and $dirty on the form comes up again.

[ajoslin]

It's working in this test:

https://github.com/ajoslin/bootstrap/blob/tabs-form-test/src/tabs/test/tabsSpec.js#L504-L524

[rosslavery]

I updated my plunkr with the latest tabs.js from be7ecff

http://plunker.co/edit/aEKvVwzHtcokTsYMMc2f?p=preview

In your test, I noticed that the ng-model values for the inputs were not properties of the same object defined in the parent scope.

In my plunkr, $scope.client is defined in the parent controller, and then both inputs are set to have ng-model values as properties of that object.

If I set the inner inputs ng-model to be $parent.client.email then it does dirty the form, but no longer has it's value bound.

[rkarakaya]

ng-options are duplicated inside tab!!
see this plunkr.
http://plunker.co/edit/frngp5?p=preview

[ajoslin]

The problem is the content elements are getting 'double-compiled'. Fixed that, working on a couple more fixes. Will commit soon :-)

[rkarakaya]

very nice..:-)
whole day, I was struggling this.