Angular form(s) across multiple tabs, single $pristine/$dirty

Question

I have read and understood the use of a forms $pristine/$dirty property to detect changes to a form's data.

However, in trying to keep my UI friendly, I have split my various data fields over a number of tabs (I'm using angular-bootstrap). As far as I can tell I have to create a separate 'form' element for each tab and use a controller to test across all the tabs' $pristine states in order to determine the overall pristinity (is that a word?).

i.e.

<tab>
   <form name="a">...</form>
</tab>
<tab>
   <form name="b">...</form>
</tab>

which means I have to test a.$pristine && b.$pristine to determine the overall pristinity. This becomes laborious when there are many tabs involved.

I have tried

<form name="allForm">
   <tab>..</tab>
   <tab>..</tab>
   <tab>..</tab>
</form>

but this doesnt work. I guess the element breaks the form's 'unity'.

Any ideas on how to get a single $pristine (or $dirty) propoerty for a multi-tabbed tabset ?

This maybe breaking because of new scope being created in the tab. — Chandermani
– Chandermani, Commented Jan 23, 2014 at 12:53

Nikos Paraskevopoulos · Accepted Answer · 2014-01-23 12:27:27Z

0

It seems to be working for me: http://jsfiddle.net/QqBYR/

A change, compared to yours (unless it was a typo) is that the <form> actually wraps the entire <tabset>:

<form name="theForm">
    <tabset>
        <tab>
            <input ng-model="..." />
        </tab>
        ...
    </tabset>
</form>

answered Jan 23, 2014 at 12:27

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular form(s) across multiple tabs, single $pristine/$dirty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related