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.