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

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

})();