Property `modified` on parentform not updated when childform was removed

[thabemmz]

trafficstars

My use-case is as follows:

I got a parentform with a dynamically generated list of childforms in it. The childforms are generated based on data fetched from a server.

Each time I receive new data from the server, I'd like to say that, since we have new data, the parentform should be made pristine. This is, after all, the new "truth" we have to work with right now: none of the childforms has been modified.

However, I did not find a proper way to reset the modified state of the parentform via angular-input-modified.

Example I tried the following to tackle this issue:

parentform.html

<form name="parentform" bs-modifiable="true">
  <div ng-if="childforms.length" ng-repeat="childform in childforms" ng-form="{{ childform.id }}">
    <!-- contents of childform -->
  </div>
</form>

parentformDirective.js

...
link: function ($scope) {
  $scope.$watch('childforms', function () {
    $scope.parentform.$setPristine();
  });
  ...
}
...

This seems nice, but I ran into trouble in the following scenario:

• Modify one of my childforms
• angular-input-modified now marks my parentform as modified: true
• A new set of childforms comes in from the server
• The modified childform is missing from this set of childforms

Now, because of my $scope.parentform.$setPristine call, angular-input-modified does update the $pristine and $dirty variables of my parentform, but does not update the modified: true property on my parentform.

This is probably due to the fact that the modified childform is not in the new set of childforms and the onModifiedStateChange function does not update the appropriate properties on the parentform object (see https://github.com/betsol/angular-input-modified/blob/master/src/directive/form.js#L98).

Is there any other way to do this? If not, I think this is a bug in the onModifiedStateChanged function.

[slavafomin]

Hello! Thank you for your interest in this module and sorry for a late reply.

The module itself was not actually designed for dynamic forms. Right now, we have an internal list of modified child forms, so when you remove the child form from the DOM, the directive doesn't know about it and keeps tracking it in it's internal list of changed forms. In order to solve your issue we need to somehow synchronize this list with the actual forms in DOM.

I will think about it. Thank you for a report. Also, if you have any suggestions, I will be glad to discuss them.

[slavafomin]

I've pushed some changes and released a new version: 2.4.0. You can see it in action here: http://betsol.github.io/angular-input-modified/nested-forms/. Please let me know if it works for you. Cheers!

[DoubleDot]

First of all, thank you for maintaining this module. The behaviour described above however should be "optional". A lot of us (i think?) greatly use the fact that when you remove subforms/items the modified flag remains true. Updating to this new version was impossible for me as a lot of "dirty state" behaviour is now reset when a form is temporarily removed from the DOM. And yes, i know it can never be "unmodified" again when it gets added back to the DOM, in our case this is expected behaviour. Leaving the sub-page will mark it as dirty indefinatly (untill saved).

So i'm stuck at 2.3.4.

TLDR; Any chance this could be configurable behaviour?

[slavafomin]

Hello @DoubleDot, thank you for your interest.

Could you please describe your use case in more detail? I think the fixes introduced are correct ones and the behavior you are describing is actually could be considered a bug, because the modified state of the form should always be derived from all child fields and forms, so when child form is removed from the DOM, we are now re-checking the modification state according to the actual state of the form and all it's children.

If you would describe your use case in more details I will be glad to offer you some suggestions or to look at the problem from another angle.