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.

[rkarakaya]

Thank you Andy. You saved my day:-)

[rosslavery]

Thanks a lot @ajoslin . Working great now!

[nrdcp]

It seems the issue has appeared back. I am having problems checking if the form located inside a tab is valid.

See the plunker: http://plnkr.co/edit/aMOayrmbPPqDlTtUyuks?p=preview

[Foxandxss]

@nrdcp Tabs creates a new isolated scope and you're creating your form there. Setting something in a inner scope doesn't set it on the parent.

TL;DR; The controller's scope is not aware of any form at all.

[SaulBurgos]

Any luck with this bug? I have the same problem with 0.9 bootstrap ui

[nrdcp]

@SaulBurgos As a workaround I ended up using the "tabset" directive and its templates from ui-bootstrap-tpls-0.6.0

[Foxandxss]

Excuse me, what bug are we talking about? (@SaulBurgos, @nrdcp)

If it is the message from @nrdcp 3 weeks ago. No, that is not a bug.

[SaulBurgos]

Hi @Foxandxss
I am not sure if this is a bug because you said in your previous message this :

"Tabs creates a new isolated scope and you're creating your form there. Setting something in a inner scope doesn't set it on the parent. TL;DR; The controller's scope is not aware of any form at all."

But you did not say how to resolve this with a form inside a tabset. Ex: I want to access to my ngFormController of my scope to check the $valid and $dirty property of that form but the problem is how you said: tab create new isolated scope.

So my question for you would be : How can I access to my ngFormController inside a tabset ?

you can see the example here : http://plnkr.co/edit/HKyh1BJYL12knGMfkRq0?p=preview

[Foxandxss]

The problem is Javascript inheritance. If I have an $scope and I put:

$scope.foo = "Hello";

And then I create a new scope that is child of that one and I do:

$scope.foo = "Bye";
$scope.meh = "Hi hi";

What would happen if I print foo in the child scope? Hello or Bye ? Bye Why? Because the child scope shadowed the parent foo. What happen if I print foo from parent? Hello The child is not overriding the parent, it is just creating a new copy for himself.

Ok, what happen if parent does a meh ? Nothing, he don't have any meh.

Having that knowledge. Your controller has a scope and the HTML inside the tab is transcluded, that mean that it has a child scope. Then ALL the rules I explained before applies.

What is happening in your plunker? In your first example you're creating a form in the child scope (like meh in my example). As you already know, the parent doesn't have that form in its scope so you don't see it.

In the second example, you're printing it from the child scope, so there of course you see it.

To make it work, is what we call the dot rule.

If you something like this in the parent:

$scope.foo = {
  bar: ''
}

And then this in the child:

$scope.foo.bar = "Hello";

You're NOT shadowing the parent in this case, it will get the parent's foo and then modify bar.

That is what you need to do here. Create a form using the dot rule and from the child just assign to it a new form.

Check here: http://plnkr.co/edit/R6v7EwQnQiDzK9HURqjL?p=preview
Read more: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Read that, is much much explanation that I could give you here.

[SaulBurgos]

Thanks you for you explanation only for the record I made this example of how should work for everybody in the future:

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

some consideration that I think important :

• You need to use the directive ng-form instead of an element form "".
• The directive ng-form is not trigger the submit event, so it is not going to work the ng-submit() , you need to use a ng-click instead
• the ng-model of inputs should be in another object, in my tests is the only way to get access to the ngModelControllers of the ngFormController of your form.

Well if I wrong please correct me, I am not a expert on angular :).

thanks @Foxandxss for your answer

[Foxandxss]

I like it.

[amirensit]

Is this fixed with angular 2 because I face this problem.