Form changed tracking

Form changed tracking means deviation from the initial state of the form† indicates that a form changed. You can change a field and set it back to it's initial state and aaFormExtensions considers the field AND the form no longer changed (all values are equal to their init state†).

Angular considers the field/form dirty still since it was touched (yet changed back to initial state).

Form reset

Sets the state of the form back to it's original state†:

Reset initial form state

The current state of the form will be considered it's initial state (any changes from here are now $changed):

†AFTER AJAX. All native Angular AJAX requests are counted by aaLoadingWatcher and a form isn't considered loaded until pending AJAX requests have completed. If you have other types of loading to account for simply use aaLoadingWatcher.increment()/.decrement() API to count them.

Loading indicators

isLoading boolean is available from aaLoadingWatcher.isLoading factory or:

$rootScope.aaIsLoading = {{ aaIsLoading }}

On-navigate away handling

Includes (by default, overridable) detection of Angular UI Router $stateChangeStart AND native DOM beforeunload. If the root form in the view is myForm.$aaFormExtensions.$changed it will block with a JavaScript confirm. Please customize this with however you are doing modals for the UI Router case. I would recommend this. Then register your own custom strategy:

Use to ignore on a per form basis (if you registered a global default):

Person

//current variable status
personForm.$valid = {{ personForm.$valid }}
personForm.$aaFormExtensions.$changed = {{ personForm.$aaFormExtensions.$changed}}
personForm.$aaFormExtensions.$childForms.length = {{ personForm.$aaFormExtensions.$childForms.length }}
personForm.$aaFormExtensions.$invalidAttempt = {{ personForm.$aaFormExtensions.$invalidAttempt}}

Address

//current variable status
addressForm.$valid = {{ addressForm.$valid }}
addressForm.$aaFormExtensions.$changed = {{ addressForm.$aaFormExtensions.$changed }}
addressForm.$aaFormExtensions.$childForms.length = {{ addressForm.$aaFormExtensions.$childForms.length }}
addressForm.$aaFormExtensions.$invalidAttempt = {{ addressForm.$aaFormExtensions.$invalidAttempt }}

Friends

It is important to note that with controls in a repeater, the form directive must be on the repeater element for validation to work properly.

First Name	Last Name
		{{ friend.firstName }}	{{ friend.lastName }}

Try interacting with the advanced features of the forms:

Try saving the form:

ngForm boundaries are indicated like this

Person

Address

Friends

Car