Angular form $pristine is set to false by default

Question

I am using Eternicode's Bootstrap Datepicker in my app. I have created a datepicker directive and same is used in Angular form.

Datepicker directive :

angular.module('MyApp', [])
      .directive('myDatePicker', function($compile) {
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModelCtrl) {
            $(element[0]).datepicker({
              autoclose: true,
              format: "dd/mm/yyyy"
            });

            $(element[0]).datepicker().on("change", function(e) {
              scope.$apply(function() {
                ngModelCtrl.$setViewValue(element.val());
              });
            });
          }
        };
      });

When the Angular form is initially loaded, following are its properties:

$pristine : false
$dirty : true

When i watch the form model and print them on console, i understood form model had property that was set by datepicker and this is how it looks :

On same Plunker link , if i comment date section in form following are its properties:

$pristine : true
$dirty : false

This is how form model looks now :

How do i keep my form model free from being corrupted, which is causing problems by setting $pristine to false and $dirty to true, despite of using Date directive ?

PS : This is the abstraction of the bigger use-case that is in our current application.

Thanks in advance.

score 1 · Accepted Answer · answered Oct 14 '16 at 08:27

I have investigated you code and observed that, you should write you following code in compile function of directive.

 $(element[0]).datepicker({
          autoclose: true,
          format: "dd/mm/yyyy"
 });

it will resolve your problem.

so your directive looks like as follow :

    .directive('myDatePicker', function($compile) {
    return {
      restrict: 'A',
      require: 'ngModel',
      compile: function(scope,  element, attrs) {
        $(element[0]).datepicker({
          autoclose: true,
          format: "dd/mm/yyyy"
        });
      },
      link: function(scope, element, attrs, ngModelCtrl) {
        $(element[0]).datepicker().on("change", function(e) {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(element.val());
          });
        });
      }
    };

The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often.

That worked like a charm man :) Time for me to read, re-read this [SOF link](http://stackoverflow.com/questions/24615103) — BeingSuman, Oct 14 '16 at 08:54

score 0 · Answer 2 · answered Oct 14 '16 at 08:04

0

I don't completely understand your use case, but after you set your date selection, why don't you just do a programmatic

$scope.form.$setPristine();

I believe this was introduced in v1.1

answered Oct 14 '16 at 08:04

nikjohn

20,026
14
50
86

i tried that but failed. Where do i do that ? In controller or in directive ? – BeingSuman Oct 14 '16 at 08:06
1

Wherever your form is in scope. One way to see this would be to install batarang, and check your scopes. Whichever scope has `.form` should be where you use this – nikjohn Oct 14 '16 at 08:08

Angular form $pristine is set to false by default

2 Answers2