md-maxlength doesn't update immediately if model content is updated in javascript

[Sam-Davis]

Steps to reproduce:

1. create a textarea with md-maxlength="500" ng-model="modelitem.description"
2. create a button with a function that updates modelitem.description to be null

issue - the couter of characters used next to the text area will not update, it will stay as 32/500 for example. It will only update once the user starts typing again.

This is in version 0.7.1

[bradmartin]

+1 still present in current master.

$setPristine(); and $setUntouched() have no effect.

[gauravbhavsar]

+1 (any work-around for now ?)

[gauravbhavsar]

here is the plunker for work around.

[scspijker]

👍 Still not working. If like me, you have a clearForm function, you might not want the watch from gauravbhavsar's example. Simply make your md-maxlength get the length from your controller:

<input type="text" ng-model="ctrl.description" md-maxlength="ctrl.maxLengthDescription">

And then in your clearForm() method, reset the maxLength (like the watch does) (example is ES6):

_clearForm(form) {
  this.description = "";

  // Known issue, md-maxlength does not update on model change
  // https://github.com/angular/material/issues/1870
  this.maxLengthDescription = 500;
  this.timeout(() => {
    this.maxLengthDescription = 30;
  });

  form.$setPristine();
  form.$setUntouched();
}

[andrew-cunliffe]

👍

An easy work around for this is to also include the ng-maxlength attribute like so...

    <md-input-container>
        <label>Description</label>
        <textarea name="description"
                  required="required"
                  md-maxlength="500"
                  ng-maxlength="500"
                  ng-model="ctrl.summaryDescription"></textarea>

        <div ng-messages="form.description.$error">
            <div ng-message="required">Description is required</div>
            <div ng-message-exp="['md-maxlength', 'maxlength']">Description is too long</div>
        </div>
    </md-input-container>

... this appears to 'work' better however highlights another issue that I have raised here #5853

[claire921]

+1

[sunil-ideas2it]

Anyone got this thing fixed. I am facing the same issue

[scspijker]

@ThomasBurleston this is fixed in a new release?

[Steve-Mc]

Still happening for me.

[devversion]

@steve-mcqs This issue was closed by our Spring Cleaning.

But as I'm able to reproduce that bug, I'll reopen that issue.

[pawelbujna]

Ok, I don't know if it helps You, but for me fix like this works:

angular.element('#html-element-' + name).triggerHandler('input');

This is a part of directive so thats the reason i use name variable. You just have to trigger(Handler) input event.

[ghost]

I wrote a simple code that could solve this problem

in your view:
md-maxlength="vmCtrl.getMaxLen(30)"

in your controller:

var fakeMaxLen;
vmCtrl.getMaxLen = function (value) {
if (fakeMaxLen)
return fakeMaxLen;
return value;
};

// call this function after your data model was changed and you need to update char counter
function callMeWhenYouNeedToResetCharCounter(){
fakeMaxLen = 100000;
$timeout(function(){
fakeMaxLen =undefined;
vmCtrl.form.$setPristine();
vmCtrl.form.$setUntouched();
});
}

// you can disable animation of .md-errors-spacer class and set visibility to hidden, when process started
// and return back to original state after the process finalized (in timeout function)
// it's just for smoother working and prevent char counter flickering