md-maxlength character count doesn't update when changed in controller

[johncvieira]

If an input field has a md-maxlength showing the character count of the field, (ex. 34/40). And the form is submitted, and I clear the field in the controller (vm.task.field = ''). The counter will remain at 34/40 with no text in the field.

Related to #1870

[gkalpak]

This is an actual issue. Has been also mentioned in #1903.

[breeze4]

The key line of code seems to be right here:

https://github.com/angular/material/blob/master/src/components/input/input.js#L323

Instead of using element.val() to get the latest value of the input field, why not use ngModelCtrl?
Current: charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );
Proposed: charCountEl.text( ( ngModelCtrl.$modelValue || '' ).length + '/' + maxlength );

Is it okay to reference ngModelCtrl.$modelValue in this context?

If that seems like a valid change, I'd like to try my hand at a PR fixing it with a corresponding test.

[batressc]

I created this example in codepen.io (http://tinyurl.com/ngfhxcu) where I "override" the md-maxlength directive and have added the proposed change by @breeze4 for better reference.

Please consider include this change and make the respective test framework

[zargold]

@batressc nice codepen but the problem with this is once you go over the md-maxlength (when I just tried doing that it says you are persistently at 0/150 or whatever rather than 159/150) so it gives incorrect information the length measurement became off.

[gkalpak]

Indeed, using the $modelValue won't show correct info when the input value is invalid, since (by default) in that case the $modelValue is set to undefined.

[julienpa]

Since it has been moved to the backlog, does it mean it won't be fixed anytime soon?

[smurugavel]

+1.
I see another workaround suggested in here but I haven't tried it 1870

[corentin-gautier]

+1

[nestabur]

+1

[pablozandona]

+1

[ogaihtorecic]

In your clearForm function:

$timeout(function() { model.field = ""; }, 30);

Worked for me.

[MadJlzz]

+1

[DevinWatson]

+1

[smurugavel]

Hello @ThomasBurleson. A resolution on closing this item will be much appreciated. This and most other items that were closed are missing resolution.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

Which other closed, deprecated issues are missing the ^^ comment ?

[devversion]

Referencing #8351

[TiboQc]

I managed to find a workaround based on what @ogaihtorecic said (which didn't work for me), using Angular 1.3.20 and Angular-Material 1.0.5:

$scope.model.field = '';
$timeout(function() {
    $scope.form.fieldName.$setViewValue(''); // resets the <input> value which updates the counter
    $scope.form.fieldName.$setUntouched(); // resets validation on the field
},0);

[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

[himvins]

codepen - (http://tinyurl.com/ngfhxcu) given by @batressc is working fine for the issue but it has one issue mentioned by @zargold . By just modifying the codepen with one condition It is working fine for me. Try this codepen with below renderCharCount function.

function renderCharCount(value) {
                            if(ngModelCtrl.$modelValue !== "")
                                    charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );        
                            else
                                    charCountEl.text((ngModelCtrl.$modelValue || '').length + '/' + maxlength);

                            return value;
                        }

[tgelu]

+1