Angularjs minlength即使具有所需长度也无效

时间:2017-08-08 16:05:35

标签: javascript angularjs angularjs-directive

目前我在提交表单时遇到错误。

enter image description here

我注意到,当我为minlength设置所需长度时,它会显示成功,但在下面有$ error表示问题是minlength。

所以结构就是fo-address.html就是形式。 fo-address.js是一个将值放入表单的指令。 然后在表单中有jn-phone-number,它是从表单中获取信息的输入。

我试过调试这个并注意到问题只发生在minlength而不是maxlength,我不知道为什么这会抛出无效。 任何帮助或提示将不胜感激。如果需要额外信息,请与我们联系。感谢。

fo-address.html

形式的一部分
<div class="col-xs-10 col-sm-5">
    <label cms-translation="phone" cms-state="checkout">Phone</label>
    <div jn-phone-number="model.shippingAddress.phone" input-type="number" ng-model="model.shippingAddress.phone" input-name="phone" minlength="phoneMin" maxlength="phoneMax" form="shippingForm" required="true" submitted="submitted" country="model.countryCode"></div>
</div>

指令

function ($state, localeService, urlHelper, checkoutService) {
    return {
        restrict: 'AE',
        replace: true,
        scope: false,
        templateUrl: fo-address.html,
        link: function ($scope, el, attrs) {
                $scope.locale = localeService.getCurrentLocale();
                $scope.onlyNumbers = /^\d+$/;
                $scope.noDash = (/-\s/g, "");
                $scope.default = true;
                $scope.asia = false;
                $scope.indo = false;
                $scope.hk = false;
                $scope.tw = false;
                $scope.zipMin;
                $scope.zipMax;
                $scope.phoneMin;
                $scope.phoneMax;
                if ($scope.locale == "en-HK" || $scope.locale == "zh-HK" || $scope.locale == "en-TW" || $scope.locale == "zh-TW" || $scope.locale == "en-ID" || $scope.locale == "id-ID") {
                    $scope.asia = true;
                    $scope.default = false;
                    if ($scope.locale == "en-ID" || $scope.locale == "id-ID") {
                        $scope.indo = true;
                        $scope.phoneMin = 10;
                        $scope.phoneMax = 15;
                    }
                    else if ($scope.locale == "en-TW" || $scope.locale == "zh-TW") {
                        $scope.tw = true;
                        $scope.phoneMin = 10;
                        $scope.phoneMax = 15;
                        $scope.zipMin = 6;
                        $scope.zipMax = 6;
                    }
                    else if ($scope.locale == "en-HK" || $scope.locale == "zh-HK") {
                        $scope.hk = true;
                        $scope.phoneMax = 8;
                        $scope.phoneMax = 8;
                    }
                }
                else {
                    $scope.default = true;
                }
            }
    }
}

jnPhoneNumber验证

'use strict';
define(['../jn-module'],
    function (module) {
        module.directive('jnPhoneNumber', [
            function () {
                return {
                    template: '<input type="{{inputType}}" name="{{inputName}}" class="form-control" ng-model="jnPhoneNumber" placeholder="{{placeholder}}" ng-required="required" minlength="{{minlength}}" maxlength="{{maxlength}}"/><span jn-validation="formNameAndInput" form-submitted="submitted"></span>',
                restrict: 'AE',
                require: '^ngModel',
                scope: {
                    country: '=country',
                    jnPhoneNumber: '=',
                    inputName: '@',
                    form: '=',
                    submitted: '=',
                    required: '=',
                    minlength: '=',
                    maxlength: '=',
                    inputType: '@'

                },
                link: function (scope, element, attrs, ctrl) {
                    scope.formNameAndInput = scope.form[scope.inputName];
                    if(!scope.maxlength) {
                        scope.maxlength = 20;
                    }
                    if(!scope.minlength) {
                        scope.minlength = 10;
                    }
                    if(!scope.inputType) {
                        scope.inputType = 'text';
                    }
                    switch (scope.country) {
                    case 'US':
                        scope.placeholder = '(555) 555-5555';
                        break;
                    default:
                        scope.placeholder = '';
                    }

                    scope.$watch('jnPhoneNumber', function(newValue, oldValue) {
                        scope.setValue(newValue);
                    });

                    scope.setValue = function (value) {
                        if(scope.placeholder !== ''){
                            if (value) {
                                var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
                                value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
                            }
                            ctrl.$setViewValue(value);
                        }
                    };
                }

0 个答案:

没有答案