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>

Uimask改变了ng-minlength的最大最大值

1 个答案:

编辑1：