Mdl-textfield ignores ngModel changes
I have a behavior problem mdl-textfield
At the bottom below plnkr do the following:
- click "groups working"
- press "copy" one item.
- At the very end, there is a new textbox with an associated ngModel (angular.copy), but the behavior of the textbox is weird, even if there is a value, the label is not floating, but if you click in the textbox, it floats as expected. If you change the field, the behavior remains, but if you exit without any changes, the label will return overlapping.
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 this is clear enough. I tried to post this on github material design lite thinking it was a bug, but got me started here ... Thank you
source to share
When you set the value mdl-textfield__input
ng-model
after registering the mdl component, it mdl-textfield
doesn't get the class is-dirty
, so it doesn't behave the way it should.
You can use this directive on the `mdl-textfield__input:
"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);
})();
source to share
You have to manually clean up MDL js text inputs if cleaned up with scripts. After clearing the 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();
}
}
source to share