javascript - 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。

那么使用两次文本输入是更好的主意吗？

我的面具通常有

(999)-9999999

11 个字符，但它也很重要

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

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

(function (angular) {
'use strict';

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

Answer 1

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

但是，如果您真的需要这个，您可以定义一个 Controller 方法来计算已经通知的数字数量:

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:

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

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