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. cl

Answer 1

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 2

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);
    }

Answer 3

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);

})();