Uimask changes min max lentgh of ng-minlength

Question

<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

small part of controller

(function (angular) {
    'use strict';

    angular
        .module('signup')
        .controller('SignUpController', SignUpController);

    SignUpController.$inject = [
        '$state',
        '$timeout',
    ];
    /* @ngInject */
    function SignUpController($state, $timeout, Account, AuthServer, Alert, Principal, StringUtil ) {
        var vm = this;

        vm.model = {};

        vm.companyMask = "0(999)-999-999";




    function signUp() {



        Account.register(vm.model).success(
            function (emptyData, status, headers) {

                AuthServer.checkAuthenticationToken(headers, true);
                Principal.identity(true).then(
                    function (account) {
                        var companyShortInfo = {

                            companyPhoneNumber: vm.model.companyPhoneNumber,
                            }
                        };


                    }
                );

            }
        )
    }

ui-mask added to the module in a module such as

(function (angular) {
'use strict';

angular
    .module(
  'app.tracking',  
        'angular-google-analytics',
        'ui.mask'

Answer 1

If you accept one suggestion, from the UX perspective, the counter is useless in this case. Simply remove it. The mask states that you need to fulfill the entire field to correct inform the value.

But, if you did REALLY need this, you can define a controller method to calculate the amount of digits that were already informed:

function Controller() {
    var vm = this;

    vm.inputValue = null;

    vm.calculateDigits = function _calculateDigits(value) {
        return (value + '').match(/([0-9]{1})/g).length;
    };
}

Remember that ui-mask only add the value to $modelValue or $viewValue of the ngModel after it's valid, returning undefined before (unless you already typed something valid before).

Edit 1:

To work with this function on the view you need to place an Angular Expression like this:

<p class="help-block">{{ vm.calculateDigits(vm.model.companyPhoneNumber) }}</p>