Umask 改变 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 个字符，但它也很重要

( ) 和 - 所以它变成 14。但它们不是字符

控制器的一小部分

(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

如果你接受一个建议，从用户体验的角度来看，在这种情况下计数器是没有用的。只需将其删除。掩码表明您需要填写整个字段才能正确告知值。

但是，如果你真的需要这个，你可以定义一个控制器方法来计算已经被告知的位数：

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 before（除非您之前已经输入了有效的内容）。

编辑 1：

要在视图上使用此函数，您需要像这样放置一个 Angular 表达式：

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