betsol / angular-input-modified Goto Github PK

Unfortunately I have discovered another issue with this library. If you are using an ng-repeat it does not check if the entire form has been modified correctly.

I have an Plunk here as an example: http://plnkr.co/edit/b7OTGt6NTYIJDJIEHMe0?p=preview

If you change both fields and then change one back to the original value it thinks the entire form has not been modified. This is because you are adding models to your modified-models array based on the string used in the ng-model tag and not the actual object.

I also tried to use nested forms using the ng-form directive, however the top form does not see that its child forms have been modified.

Thanks for all the help.

Please see this fork of your plunkr and try changing the about field. The first letter you type gets set as the masterValue but this is incorrect, it should be null.

http://plnkr.co/edit/04vdPuSYFUE7a7U2ngWE?p=preview

Hello,
I need to know is there any way to use dirty check on modal instead of the form name element. If yes can you please write me the simple example.
And I have also one custom dropdown in my form.
Which is not there the name attributes on my html how can I track this.
I have past my html in the below mail.
Can you please see the below html and provide me the function in my JavaScript to check the dirty flag

Be able to in the provider specify if the comparisson of the values needs to be strict (checking types) or only by value.
Ex:
No detect changes on 1 == '1'

Hi,
Thanks for the repo. In my my use case I must call a function from a save button, ie ng-click="mySave()".which then sends form to my mongodb.If possilbe, how can I reset the field and or form from the function?
TIA
John

It's not working for Text-Angular (Rich TextBox) .

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

In latest version form is flagged modified, but if you comment script tag for latest version at the bottom in index.html and uncomment reference to version 1.2.0 then form is not flagged modified.

This is only a suggestion. Since:

• since we're modifying ng-model's native behaviour
• not declaring a new directive
• calling the module ngInputModified instead of something that's not in angular's namespace (like bsInputModified)
• overriding the way $pristine is set to account for modified (again affecting angular's standard behaviour)

I propose we call our flag $modified. It would feel like a very fluid extension of angular's capabilities this way.

Let me know what you think!

can you add the license terms to the bower.json file so that sites like webjars.org can pick this component and pack it as a webjar?

Hey looks like an interesting library, but I'm struggling to get it to work with the angular-autofields library. I assume it's because that library dynamically builds and populates all of the input fields, but even after using the delayed initialization I'm struggling to get this to work. Any Ideas?

I was hoping this would work on a form I have that also has an input=file tag, but it does not seem to track that input. All other input types are working. Let me know if I am doing something incorrectly please.
Thanks

Hi,
Thanks for the great plugin.

We have been using this plugin recently and had a scenario where we have an array list model bound to a group of checkboxes. Comparison in valuesEqual doesn't do a deep compare:
https://github.com/betsol/angular-input-modified/blob/master/src/angular-input-modified.js#L301

We have replaced return (value1 === value2); with return _.isEqual(value1, value2); but this adds a dependency on underscore.

I'm attempting to add new form fields (checkboxes) to a form using ngRepeat and have this mark the form as modified. A bit hard to explain but try selecting the Add new at http://plnkr.co/edit/TSjSAI2E3FwJHg75Y5Hv?p=preview and see that the form is not marked as modified.

Looks related to #12.

Hi,

it would be very good if there was an option to not apply the plugin to a form. For instance, when using angular-input-modified together with ui-select, the following errors will commence:

Cannot read property '$setPristine' of undefined

So perhaps an option like no-input-modified, like this:

<form no-input-modified>...

http://screencast.com/t/dyVw1r1hcHA

I used this module in a uib-modal (https://angular-ui.github.io/bootstrap/). The data modal that is passed to the modal is reloaded prior to being opened again.

I found that adding the same checks you had in onInputValueChanges() to setPristine() fixes it.

Changing from:
// Notifying the form.
formCtrl.$$notifyModelModifiedStateChanged(modelCtrl);

to:

                    // Notifying the form.
                    if (formCtrl && 'function' === typeof formCtrl.$$notifyModelModifiedStateChanged) {
                        formCtrl.$$notifyModelModifiedStateChanged(modelCtrl);
                    }

Firstly, congratulations - this is a great library - Angular should do this by default!

I have some forms that need to be hidden using ng-if when the template loads. Unfortunately I guess the directive doesn't associate with the form when it gets included into the DOM and I get Cannot read property '$setPristine' of undefined when the data loads.

From the plunk, click "Show Form" then "Load Form"

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

The example shown at https://betsol.github.io/angular-input-modified/bootstrap-ui-date-and-time/ appears to be broken using Chrome 46.0.2490.80 m.

Related to #4.

This Error appears in the console at the start of my application.

bower-combined.js:5 TypeError: Cannot read property '$$onChildModelModifiedStateChanged' of null

As stated in #36. Make sure that it works with webpack module bundler.

I was testing your module to use in my current project but was getting issues when using the Ui-Bootstrap timepicker. I have a Plunker here demonstrating the issue: http://plnkr.co/edit/yZPDr3RFIOWBvcQZiyGw?p=preview

From what I can tell your code does not create the modified flag and does not store the masterValue.
i.e. myForm.fieldName.masterValue === undefined returns true as does myForm.fieldName.modified.

What is interesting is that the input fields get the ng-modified class when they are not set to the original model value, but these other flags and values are not set.

If for example I have the following model:

{ a: 1, b: 2, c: {} }

if I place an input with ngModel = "c.a.b", it will crash when I try to reset. Could you just either wrap the eval() between try and catch or create the path if it does not exist?

Hi. i need to check if data from modal window form is changed.
if i set it up like this
" ng-model="variation_form.modified" ng-change="change()" value = "{{ variation_form.modified ? '1' : '0' }}">
then manually changing input value will trigger change function, but changing it via changing any form element it doesnt trigger. Any help? Could be any workaround . I have function ok() that is closing modalInstance and there i need to access modified value.

I've used the version v2.3.1.

ngModel directive is not triggered. So I am always getting modified as false.

Hi!

I have some legacy system and I got a problem with this midule. There is the form

<form novalidate name="studyDesignDetailForm" ng-init="initializeForm()" class="form-horizontal"
                  role="form" data-disable-all="readOnly">
    <label>Label_1</label>
    <input name="sDesignName" type="text" maxlength="255" ng-model="studyDesign.studyDesignName"
           class="form-control input-sm" ng-readonly="!isStudyActive"/>

    <label>Label_2</label>
    <input type="text" name="overdueDays" class="form-control input-sm"
           ng-pattern="numericPattern"
           onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="4"
           ng-model="currentTimePoint.overdueDays "
           ng-disabled="currentTimePoint.scheduled=='N'?true:false" ng-required="currentTimePoint.scheduled=='N'?false:true && !readOnly"/>
</form>

For 2nd input I get exception:

TypeError: Cannot read property '$$notifyModelModifiedStateChanged' of null
    at angular-input-modified.js:386
    at angular.js:19612
    at completeOutstandingRequest (angular.js:5964)
    at angular.js:6243

'cause when ngInputModified's ngModel directive is executing the form in null. In ngModelModifiedFactory

  // Handling controllers.
  var modelCtrl = controllers[0];    // ModelController
  var formCtrl = controllers[1];     // null
  var bsModifiable = controllers[2]; // null

Do you have any idea what's go wrong?

There is a plunk
http://plnkr.co/edit/cu7KVY?p=preview

When set radio button masterValue from controller form is marked as modified. With simple text input fields masterValues works fine.

Hi,
I am getting this console error though it's not causing any issues,
Cannot read property '$$onChildModelModifiedStateChanged' of null

Please let me know how to fix this bug.

Regards

Sandeep

I'm trying to use the input-modified with the tags-list angular component that as far as I know is working with ng-model correctly.

I'v created this plunker to show the problem: https://plnkr.co/edit/bVbKfmE3hRID7Loq4E8N

I have no way of telling if the issue is on the input-modified side or the tags-list side.

Let me know what you think. The plunker has instructions on how to reproduce the problem.

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.

When you use bs-modfiable="false" it does not seem to behave as expected. Irrespective of where in the DOM you put it.
Please see this plunkr:
http://plnkr.co/edit/S8cFIX6WG0p5mLApB0jE?p=preview

My application has a form where fields(select, input) are dynamically added. In this case "angular-input-modified" does not work as desired. Is there any workaround?

Hi @slavafomin, that's a great library, really liking it.

Here's an issue I came across when working with "nested" forms. I've checked that it occurs on versions 2.3.2 and 2.4.2 (possibly others). I have a form with a nested ng-form, the former gets toggled with ng-if. It looks like I can trick it into a "modified" state.

Here's the Plunker: https://plnkr.co/edit/YuYuG6M3SGWYiFE3jBKa?p=preview.

• Start with a form with selected checkbox "B":

• Select option "foo" in the sub-form. The form is modified as expected:

• Unselect checkbox "B". The form is still modified:

• Select option "B" again. The form values are now different from the starting ones, but it's no longer marked as modified:

Please let me know if there's a workaround and/or fix. Appreciate your help!

After upgrading from angular 1.5.10 to angular 1.6.1, i noticed this error:
TypeError: Cannot set property '$dirty' of null, because this line

// Calling overloaded method.
originalSetPristine.apply(this, arguments);

So, i changed the line above to this and everything is working fine

if (this) {originalSetPristine.apply(this, arguments);}

Your plugin saved my life, are you planning to port it to Angular 2?

It appears that child forms do not propagate the modified value to their parent forms. I modified one of your examples to show you what I mean: Example

You'll see that while the modified value of subForm changes the modified value of myForm (subForm's parent) does not.

Would it be possible to make ng-modified checks bsed on $viewValue instead of currently $modelValue ?

Use case: when using ng-pattern or any validation rules, ngModel is prevented to change while user actually modified the $viewValue.

Hello,

<input type="email"> will remain "not modified" until a valid e-mail is entered.

So if you change the mail in the plunker to any invalid string like "notvalidmail!", then the modified value will remain false while it should be true since the value has changed!

http://plnkr.co/edit/a923ORQwFMPv4f568iwz

Can you please register this on www.npmjs.org?

I was just looking through the source and noticed that you are overwriting the ngModel directive with your own custom version. This can be very dangerous for people using different versions of Angular, and is not recommended.

Instead, consider refactoring your code to add a decorator to ngModel.

We are using a system where parts of a form are shown or hidden with a ng-if "toggle".
Whenever i visit a certain part of a form, leave, and go back, this "ghost" modified control pops up.
to see this info, i added "{{form.resourcegeneralform.modifiedModels | json}}" to the html to see.

[ { "$viewValue": "", "$modelValue": "", "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": true, "$invalid": false, "$error": {}, "$name": "", "$options": { "allowInvalid": true, "updateOnDefault": true }, "modified": true, "masterValue": "[]" } ]

it has no name, the master value was an array but it went back to an empty string somehow. How can i find the offending control?

I'm not sure if I had a special case, cause I was using ui-select (https://github.com/angular-ui/ui-select) in a bootstrap modal. The model is initially set to undefined and the array using for the options is only loaded when the modal is opened.
On opening the modal the modified value was set to false, which is fine, then when a value is selected in the select, it stays false, only when another value is selected was it set to true.

I was able to fix it by checking if the $modelValue was defined in the onInputValueChange function, like so:

              if ('undefined' === typeof ngModel.masterValue) {
                    // Initializing the master value.
                    ngModel.masterValue = ngModel.$modelValue;
                    // if the master value has a value, set modified to true
                    if (ngModel.masterValue){
                        ngModel.modified = true;
                    }
                    // Initially decorating the element.
                    toggleCssClasses();

                } else {
                     ...
                }

I have a form that has some regular input fields and some drop-downs that use angular-ui-select. The modified state of regular inputs are easy to track via form.field.modified, but the drop-downs don't seem to have such an option.

Is there a way to inspect why the form gets set as modified? I'm trying to call form.$setPristine() in a number of places, but that doesn't help get the form cleared. Just need some debugging tools to understand what is going on.

Here's a simplified version of the code that led me discover the bug:

<!-- html -->
<div ng-controller="MyCtrl as ctrl">
    <button ng-click="ctrl.resetForm()">Reset</button>
    <form name="myForm">
        <table>
            <tr ng-repeat="foo in ctrl.Foos">
                <td ng-repeat="bar in ctrl.Bars">
                    <input type="checkbox" ng-model="bar[foo.id]">
                </td>
            </tr>
        </table>
    </form>
</div>

// script
angular.module('app').controller('MyCtrl', function($scope) {
    ctrl.Foos = [ {id:'a'}, {id:'b'} ];
    ctrl.Bars = [ {a:true, b:false}, {a:false, b:true} ];

    this.resetForm = function ()
    {
        $scope.myForm.reset();
    }
})

On trying to reset the form from my controller, an exception gets thrown at ngModel.js:156 (and subsequently ignored in line 159). The error is

ReferenceError: foo is not defined

Any ideas for a bug fix?

You should annotate everything. Now, when using require.js and optimizing, mangled variables breaks the code regarding this module. I don't want to add angular-input-modified to ngAnnotate grunt task.