Uimask changes min max lentgh of ng-minlength

[caneraydinbey]

<div layout="column">
    <md-input-container class="md-block" flex-gt-sm>
        <label translate>Company Phone</label>
        <input name="companyPhoneNumber"
               ui-mask="0(999)-9999999"
               ng-model="vm.model.companyPhoneNumber"
               ng-required="true"
               ng-minlength="11"
               maxlength="11"
               md-maxlength="11" />

        <div ng-messages="form.companyPhoneNumber.$error" ng-if="form.companyPhoneNumber.$dirty"
             role="alert" ng-messages-multiple>
            <div ng-message="md-maxlength">
                <span translate translate-values="{length:11}">global.messages.error.max</span>
            </div>
            <div ng-message="minlength">
                <span translate translate-values="{length:11}">global.messages.error.min</span>
            </div>
            <div ng-message-exp="['required', 'pattern']">
                <span translate>global.messages.error.phoneNumber</span>
            </div>
        </div>
    </md-input-container>
</div>

it shows 14 chars but i did not fill anything.

I want to show only string. But when user clicks, it should write 54343 into that field.

And it should only put 11 chars. Not 14.

So using text input 2 times is better idea?

my mask normally has

(999)-9999999

11 char but it also counts

( ) and - so it becomes 14. but they are not char