md-maxlength and ng-messages together are not showing text counter

[andrew-cunliffe]

The counter for characters seems to end up inside the ng-messages block when both maxlength and messages are used together,

The result is that there is no counter until an error occurs....

Before reaching the maxlength...

When finally reaching the maxlength the counter appears without knowing I'm approaching the limit...

HTML CODE

    <md-input-container>
        <label>Detailed Description</label>
        <textarea name="detailDescription"
                  required="required"
                  md-maxlength="1000"
                  ng-model="ctrl.detailDescription"></textarea>

        <div ng-messages="form.detailDescription.$error">
            <div ng-message="required">Detailed description is required</div>
        </div>
    </md-input-container>

[andrew-cunliffe]

To add, resulting HTML DOM looks like this...

<md-input-container class="md-input-has-messages md-input-has-value" style="height: auto;">
    <label for="input_5">Detailed Description</label>
    <textarea name="detailDescription" required="required" md-maxlength="1000" ng-maxlength="1000"  ng-model="ctrl.detailDescription" class="ng-pristine ng-valid md-input ng-valid-required ng-valid-maxlength ng-valid-md-maxlength ng-touched" id="input_5" rows="1" ng-trim="false" aria-multiline="true" aria-disabled="false" aria-required="false" aria-invalid="false" style="height: 237px;"></textarea>

    <div ng-messages="form.detailDescription.$error" aria-live="assertive" class="ng-inactive">
        <div class="md-char-counter">900/1000</div>
        <!-- ngMessage: required -->
    </div>
</md-input-container>

As you can see the md-char-counter is being put inside the ng-messages which has been given the ng-inactive class that has an opacity of 0 set.... which is correct for not showing error messages, but makes for a strange experience regarding the counter

[kimsrung]

+1. That's what I've been facing either.

[corneschouten]

+1

[Perchework]

+1

[SocVi100]

+1

[topherfangio]

Hi all, this should be fixed in master as we rebuilt the DOM to move the counter outside of the ngMessages container.

Can someone please verify that it is fixed or provide a demo if you are still experiencing issues?

[andrew-cunliffe]

Yes, it looks good in RC-7

[topherfangio]

@andrew-cunliffe Awesome! Thanks for the feedback. Going to close this issue.

Please post a comment if you're still having trouble and we will reopen.