How can I check multiple inner forms to see if they are prestine?

Question

I have code like this:

<div ng-click="wos.wordWordFormRowClicked(wf, $index)"
     ng-form="wordFormNgForm_{{$index}}"
     ng-repeat="wf in wos.word.wordForms">

    <div ng-show="wordFormNgForm_{{$index}}.$pristine == true">Pristine</div>

    ...

This sets up one or more forms.

Is there a way that I can check in a loop each of the forms that are created to see if it is still pristine? I know I can add see on the form the setting of $pristine but what I want is something that will cycle through all the forms from my service. For example here it might be 2,3, 4 or more forms with names like this:

wordFormNgForm_1
wordFormNgForm_2
wordFormNgForm_3
wordFormNgForm_4

Or however many of these that have been set up. But I am not sure of a way to check through each of them. I'm not sure if this helps but these forms are located inside another form:

<div ng-form="wos.wordNgForm">
    <div ui-view></div>
</div>

IIRC you can just check the $pristine value on the single containing form. if a subform becomes dirty all parent forms are also marked as dirty as well, and by extension, no longer pristine. that only helps if you are interested if "any" are touched. Do you want to know exactly what ones are dirty? — Skintkingle, May 13 '16 at 13:08
@Skintkingle - Hi, what I need to do is to check each of the child forms and if one is dirty I'll implement some code to update that and set it's pristine state to true. Problem is I am not sure how to cycle through the child forms as they are generated dynamically by the ng-repeat. — Samantha J T Star, May 13 '16 at 13:25
If the child forms were in an array then I'd be okay but seems like they will just be named variables ending in _$index. — Samantha J T Star, May 13 '16 at 13:26
I have exactly this kind of code looping through dynamically crated child forms to reset a form written in typescript, Let me dig it out and i'll post an answer. — Skintkingle, May 13 '16 at 13:28
It's less interesting than that actually. Do you really want to loop through and set each form to $pristine ? there is a "setPristine" method which sets all child forms as pristine too. In my code when resetting the form, I loop through the ng-Model list of entries and reset them, and then simply call $scope.myForm.$setPristine(); from my controller — Skintkingle, May 13 '16 at 13:31
I just really need to find out how to do the looping. Then within that looping I can check and do updates of the data and after that set to $pristine. — Samantha J T Star, May 13 '16 at 14:16

score 1 · Accepted Answer · answered May 13 '16 at 13:45

1

I think what you're after is the $setPristine() method. on a form controller this method exists to set a form (entirely, including all children/child forms) to pristine. there are others which may be of use too you can read up about here. This will not reset the contents of the form, You will have to do that as an additional task, if you want to. The idea of $setPristine is to say "hey, this form is untouched by the user" even if it is... It could be the forms new starting point, for example after a user has set some defaults or something like that. It does exactly what it says on the tin, simply sets everything to pristine again.

For example from myController whose scope contains myForm you can do

$scope.myForm.$setPristine();

Hey presto, Pristine-them-up, all the way down!

This will only help you if you dont need to know exactly which subforms are dirty or not, and just want to reset them all to Pristine.

In my HTML I have the following:

<form id="myForm" name="myForm" ng-controller="MyController as myCtrl">
    <ng-form name="child_form_{{::id}}" ng-repeat="id in ids">
        <!--Stuff here -->
    </ng-form>
</form>

where $scope.ids is a list of whatever (probably an array of numbers in this instance)

in this instance, if you want to know what sub forms are dirty, You have your list on scope, so from within the controller you have to loop through your $scope.ids and get your forms by re-creating the name, for example child_form_1. (But I see little benefit in knowing "which" child forms are dirty if your goal is to reset them all to pristine)

answered May 13 '16 at 13:45

Skintkingle

1,579
3
16
28

Thanks. I didn't even know it was possible to use ::id, is that something new? Works perfect – Samantha J T Star May 13 '16 at 14:26
the :: is a one time bind for an expression. It's more of a performance thing. https://docs.angularjs.org/guide/expression – Skintkingle May 13 '16 at 14:29
I'm having a big problem. I can't access the child forms. Can you let me know how you do this. Thanks – Samantha J T Star May 13 '16 at 15:01
What I need is to find out which sub forms are dirty so that I can then take those objects and one by one send the object data to my back-end. The problem is I still don't seem to be able to find a reference to the sub forms from my wos service :( – Samantha J T Star May 13 '16 at 15:22
Why are you doing stuff in a service to do with your UI? You should do this kind of data collection from your Controller for the view, compile a list of data objects that was found dirty (using the $scope, and the sub forms names) and then send that list of business objects to your service for doing . The service shouldn't be trying to access the forms directly. – Skintkingle May 13 '16 at 15:23
The application does not have any controllers. There's a service which has all the usual controller stuff that goes behind each form. The problem is when I look at the $scope I can't get any reference to the sub form names. Not sure why that is or how to access. I can access wos.wordNgForm okay but even when I put wos. (service reference) in front of the sub form names there's no objects there. – Samantha J T Star May 13 '16 at 15:32
im amazed you have access to a $scope from the service. do you hand in a scope to the service at some point? I would suggest looking at your programs structure, You really should be using controllers to do jobs like this otherwise you're going to have one very fat service. – Skintkingle May 13 '16 at 15:35
Hi, I can just access this: wos.wordNgForm and if I call my child form wos.xxx but seems not to work if I use wos.xxx{{ << something after the {{ – Samantha J T Star May 13 '16 at 15:46
your child form is a child of wordNgForm. please read the previous stack overflow question where it talks about the ["stuff"] syntax for accessing children. (I am still very concerned you are doing stuff like this in a service. this is fundamentally the wrong use of AngularJs which is very heavy on MvvM/MVC/etc patterns. – Skintkingle May 13 '16 at 15:50

How can I check multiple inner forms to see if they are prestine?

1 Answers1