Uimask改变了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>

它显示了14个字符但我没有填充任何东西.

我想只显示字符串.但是当用户点击时,它应该将54343写入该字段.

它应该只放11个字符.不是14.

所以使用文本输入2次是更好的主意？

我的面具通常有

(999)-9999999

11 char但它也很重要

()和 - 所以它变成14.但它们不是char

控制器的一小部分

(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添加到模块中的模块中

(function (angular) {
'use strict';

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

Answer 1

如果您接受一个建议,从UX的角度来看,在这种情况下,计数器是无用的.只需删除它.掩码声明您需要完成整个字段以更正通知值.

但是,如果你真的需要这个,你可以定义一个控制器方法来计算已经通知的数字量:

function Controller() {
    var vm = this;

    vm.inputValue = null;

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

请记住,ui-mask仅在ngModel有效后将值添加到$ modelValue或$ viewValue,之前返回undefined(除非您之前已经输入了有效的内容).

编辑1:

要在视图上使用此函数,您需要放置一个Angular Expression,如下所示:

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