Material: Using 'multiple' in md-select sets form.$pristine to false by default

Created on 28 Jul 2015  路  6Comments  路  Source: angular/material

Steps to recreate:

  1. Create a form with md-select.
  2. Add 'multiple' directive to md-select.
  3. Add multiple default values to md-select's model.
    When the form is loaded, its $pristine is set to false.

Example code:
http://codepen.io/anon/pen/RPqPeP

reported fixed bug

Most helpful comment

I am having the same problem too. Angular version 1.1.3

All 6 comments

Hi guys, I thinkt that it was no correctly solved.
I found other related bug:

Develop steps:

  1. add some common field (input text, etc)
  2. add a md-select with multiple directive into a ng-if condition.
  3. watch $dirty propertie of the current form

Test steps:

  1. Populate the firsts field, it should change $dirty as true
  2. enable some condition that enable the ng-if condition
  3. when the md-select with multiple directive appears, the $dirty form properties is set as false

I think that this is not a correct behavior

Having the same problem with 1.1.3

I am having the same problem too. Angular version 1.1.3

FYI I have a fix a real fix, looking into going through a PR

https://github.com/angular/material/issues/11490

little preview
removes from select.js:

      if (formCtrl && angular.isDefined(attr.multiple)) {
        $mdUtil.nextTick(function() {
          var hasModelValue = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue;
          if (hasModelValue) {
            formCtrl.$setPristine();
          }
        });
      }

Changes

+        // We want to delay the render method so that the directive has a chance to load before
+        // rendering, this prevents the control being marked as dirty onload.
+        var loaded = false;
+        var delayedRender = function(val){
+          if (!loaded) {
+            $mdUtil.nextTick(function () {
+              renderMultiple(val);
+              loaded = true;
+            });
+          } else {
+            renderMultiple(val);
+          }
+        };
         ngModel.$validators['md-multiple'] = validateArray;
-        ngModel.$render = renderMultiple;
+        ngModel.$render = delayedRender;

         // watchCollection on the model because by default ngModel only watches the model's
         // reference. This allowed the developer to also push and pop from their array.
         $scope.$watchCollection(self.modelBinding, function(value) {
-          if (validateArray(value)) renderMultiple(value);
+          if (validateArray(value)) delayedRender(value);
         });

@rschmukler hey I'm not sure what I did that unassigned you from https://github.com/angular/material/issues/3933, not sure if that is normal

@cstephe GitHub just does that automatically when an issue is modified and the person is no longer on the team. It's certainly confusing that it gets attributed to the person who posts a comment though.

Was this page helpful?
0 / 5 - 0 ratings