datepicker and ngForm's $pristine state for field

[floyd-may]

Using the datepicker to select a date appears to be invisible to invisible to a containing ngForm's logic, leaving the field's state in the ngForm with $pristine === true.

Using ui-bootstrap version 0.5.0, AngularJS version 1.0.7.

For instance:

<form name='myForm'>
    <input type='text' datepicker-popup="MMMM-dd-yyyy" ng-model='theDate' />

    <span ng-show='myForm.theDate.$pristine'>
        Holy clandestine scope updates, Batman! The field still appears pristine!
    </span>
</form>

Apologies for not attaching a jsfiddle or plunkr; I can't convince either to play nice this morning.

[pkozlowski-opensource]

@floyd-may could you provide a live reproduce scenario using http://plnkr.co/ ?

[floyd-may]

Do you have a working datepicker on plunkr? If so I can create a demo of
the problem based on it. I was having trouble getting a working demo on
plunkr yesterday.

(misspelled from my mobile phone)
On Aug 22, 2013 12:45 PM, "Pawel Kozlowski" notifications@github.com
wrote:

@floyd-may https://github.com/floyd-may could you provide a live
reproduce scenario using http://plnkr.co/ ?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/855#issuecomment-23110616
.

[pkozlowski-opensource]

@floyd-may sure, I've just forked a plunk from the demo page (http://angular-ui.github.io/bootstrap/#/datepicker)
http://plnkr.co/edit/fnH7PuV0MmtkCARcItpy?p=preview

Please change it to demonstrate your issue

[floyd-may]

Plunk created:

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

Use the datepicker to change the date, and notice that the $pristine state of the form field remains set to true. Note that once you type in the input box, the $pristine state of the field changes to false.

[bekos]

@floyd-may OK, I see. This is definitely a bug.

BTW, if you can PR for this would be nice :-)

[pkozlowski-opensource]

@bekos is this something easy to fix? I'm preparing a new release so would be cool to have this one fixed.

[bekos]

@pkozlowski-opensource Probably not an easy fix. Unfortunately I don't have much time to look into this one now.

[hallister]

@pkozlowski-opensource @bekos I don't consider this a bug. A $pristine state on a field tells whether or not a user has interacted with a field, not whether its changed. The button changing the date is still a pristine input, because the model changed it (via the button), not the user. Manually typing the date does make the state $dirty because the user directly interacted with the control.

[bekos]

@hall5714 Strictly speaking you are right, but the line here is very thin, since the popup datepicker is somehow part of the control. People see it as selecting an option from a dropdown and thus the new value makes the control dirty.

[hallister]

@bekos Good point. As for fixing it... I don't really see how at this point. Setting ngModel.$dirty = true is simply not a good idea (and more importantly the element will still have an ng-pristine class).

As far as I can tell there is no clean way to set a form to dirty or clean without $setDirty() and $setPristine(), neither of which are available on stable until 1.2.

[hallister]

Ignore above... it just occurred to me that the $pristine state should be changed once ngModel.$setViewValue() is called. So no idea why it isn't changing when the inputs view is updated. But that plunker is also throwing a bunch of errors in the console. May or may not be related.

[yaru22]

I have the same issue. When the date is selected, it should set the field dirty. So I looked into it and I'm almost certain the fix is this (using NgModelController; see http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController):

      // Inner change
      scope.dateSelection = function() {
        console.log(originalScope.dt);  // <==== prints the original date
        ngModel.$setViewValue(scope.date);  // <==== call $setViewValue() instead
        // $setModelValue(originalScope, scope.date);  // <==== We shouldn't need this
        console.log(originalScope.dt);  //  <==== prints the selected date
        if (closeOnDateSelection) {
          setOpen( false );
        }
      };

However, the one problem I have is this. When ngModel.$setViewValue(scope.date) is called, it calls ngModelSet($scope, value); from within it. When I debugged ngModelSet($scope, value) call, $scope is the same object as originalScope. So we shouldn't need $setModelValue(originalScope, scope.date);. However, if we don't have $setModelValue(originalScope, scope.date);, the value in the input text field doesn't get updated.

It's really strange because the model (i.e. dt) gets properly updated (since other calendar referencing that model gets updated) but the text in the input field is not. Does anyone have a clue?