mdl-textfield not taking ngModel changes into account

Question

I am facing an issue regarding the mdl-textfield's behavior

On the below plnkr, follow the steps:

1. click on "groups working"
2. click on "copy" on one item
3. look at the very end new textfield appeared with the ngModel associated (angular.copy) but the behavior of the textfield is strange, even if there is a value, the label is not floating but if you click in the textfield, it floats as expected. If you modify the field the behavior remains, but if you quit it without any modification label comes back with overlay.

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

ngView content

<div data-ng-controller="MainCtrl">
  <section data-ng-repeat="fo in foo">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="sample1" data-ng-model="fo.bar"/>
      <label class="mdl-textfield__label" for="sample1">{{fo.bar}}</label>
      <span ng-if="$last" ng-init="update()"></span>
    </div>
    <button ng-click="focopy(fo)">Copy</button>
  </section>
    <div data-ng-show="datacopy.edit" class="input-field">
      <input type="text" id="ex1" data-ng-model="datacopy.bar" />
      <label for="ex1">label</label>
    </div>
</div>

Angular module

var app=angular.module('plunker', ['ngRoute'])
app.config(function($routeProvider){
    $routeProvider
    //Root URL
    .when('/',{template:'<p>Coucou</p>'})
    .when('/groups',{templateUrl:'groups.html'})
    .when('/groupsnotworking',{templateUrl:'groupsnotworking.html'})
});

app.controller('MainCtrl', function($scope,$timeout) {
$scope.foo = [
  {bar: 'world'},{bar:'toto'},{bar:'toto'}
];
$scope.groups=$timeout(function(){
  $scope.groups=$scope.foo
},1000);
$scope.update=function(){
  componentHandler.upgradeAllRegistered();
};
$scope.datacopy={};
$scope.focopy=function(data){
  $scope.datacopy=angular.copy(data);
  $scope.datacopy.edit=true;
};
});

Hope it is clear enough. I tried to post that on the github of material design lite thinking it was a bug, but I have been kicked off here... Thank you

Answer 1

When you an mdl-textfield__input's ng-modelvalue is set after the mdl component is registered, the mdl-textfield does not get the is-dirty class, thus does not behave the way it should.

You can use this directive on your `mdl-textfield__input field :

"use strict";
(function(){
  let mdlTfFix = () => {
    return {
      restrict: "C",
      require: "ngModel",
      link: ($scope, $element, $attrs, ngModelCtrl) => {
        $scope.$watch(() => {
          return ngModelCtrl.$modelValue;
        }, (newVal, oldVal) =>{

          if(typeof newVal !== "undefined" && newVal !== "" && newVal !== oldVal){
            $element.parent().addClass("is-dirty");
          }
          else{
            $element.parent().removeClass("is-dirty");
          }
        });
      }
    };
  };

  mdlTfFix.$inject = [];
  app.directive("mdlTextfieldInput", mdlTfFix);

})();

Answer 2

You have to manually clean up MDL js text inputs if cleared via scripting. After clearing input value, for example, call this mdlCleanup();.

  //MDL Text Input Cleanup
  function mdlCleanUp(){
    var mdlInputs = doc.querySelectorAll('.mdl-js-textfield');
    for (var i = 0, l = mdlInputs.length; i < l; i++) {
      mdlInputs[i].MaterialTextfield.checkDirty();
    }  
  }

Answer 3

working with me. hope this can help you

function CleanMDL() {
        setTimeout(function () {
            $scope.$apply(function () {
                var x = document.getElementsByClassName("mdl-js-textfield");
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].MaterialTextfield.checkDirty();
                }
            })
        }, 100);
    }