material-design-lite: Dynamically changing input (.mdl-textfield) text with Javascript does not mark it as dirty

The is-dirty class is applied on the div that contains the textfield. So you need to apply this class on this div. Try it: http://codepen.io/anon/pen/EjRLVL

I came across this again. Something like below should work for everyone:

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

We don’t support react, but the PR was merged and the methods should be available in the current stable. To check dirty state after changing the value, call the MaterialTextfield.checkDirty() method against the node where the js class is assigned. For example: document.querySelector('mdl-js-textfield).MaterialTextfield.checkDirty().

This still needs proper documenting before closing this issue out.

Add a unique class to all inputs that you need to check for dirty, select them all with querySelectorAll, then apply the MaterialTextfield.checkDirty() method to each via a loop.

var dialogInputs = doc.querySelectorAll('.dialog-inputs');
for (var i = 0, l = dialogInputs.length; i < l; i++) {
  dialogInputs[i].MaterialTextfield.checkDirty();
}

You have to manually add the ‘is-dirty’ class to the parent, like this: $(‘#sample3’).parent().addClass(‘is-dirty’);

Example: http://codepen.io/anon/pen/mVyzBr

This directive fix the is-dirty class missing on mdl-textfield__input http://stackoverflow.com/questions/31638890/mdl-textfield-not-taking-ngmodel-changes-into-account/40781433#40781433