Question

我在表单中包含这些输入，我使用angular ng-pattern，ng-required和ng-model指令进行验证：

<div class="form-group">
  <div style="padding-left:0px;" ng-class="{'has-error':personalDataForm.phone.$invalid && personalDataForm.phone.$dirty}" class="col-md-6">
    <label>Teléfono</label>
    <input type="text" name="phone" ng-pattern="/[0-9]{3}-[0-9]{7}/" ng-required="true" ng-trim="true" ng-model="phone" class="form-control phoneRegexInput"/>
  </div>
  <div style="padding-left:0px;" ng-class="{'has-error':personalDataForm.mobile.$invalid && personalDataForm.mobile.$dirty}" class="col-md-6">
    <label>Celular</label>
    <input type="text" name="mobile" ng-pattern="/[0-9]{3}-[0-9]{7}/" ng-required="true" ng-trim="true" ng-model="mobile" class="form-control phoneRegexInput"/>
  </div>
</div>

因此ng-pattern指令将查找格式为 7位数的字符串，前缀为3位数和连字符，例如：287-8719423。

由于我不想强迫用户输入连字号，我得到了一个jQuery函数，当输入完成3个必需的数字时，它会放置连字符，这是我的函数：

$(".phoneRegexInput").keyup(function() {

    var phone = $(this).val();
    console.log(phone + " didnt match");
    if (phone.match(/\d{10}/)) {

        phone = phone.substr(0, 3) + "" + '-' + phone.substr(3);
        console.log(phone);
        $(this).val(phone);
    }

});

它工作正常，它实际上将输入值更改为正确格式化的输入值，但不会将其验证为正确。如果我删除并再次键入正确的输入，它将。

所以我认为是因为验证是从实际的用户输入中触发的，我如何让它从任何更改中听取？

相关问题。

我知道这可能与this question有关，但问题是 model 不会改变，因为它无效

我该如何解决？

解决方法

我想，“改变模型”，所以我尝试了：

$(".phoneRegexInput").keyup(function() {

    var phone = $(this).val();
    console.log(phone + " didnt match");
    if (phone.match(/\d{10}/)) {

        phone = phone.substr(0, 3) + "" + '-' + phone.substr(3);
        console.log(phone);

        // Attempt to change model
        if ($scope.personalData)
            $scope.personalData.phone = phone;
        else {
            $scope.personalData = {
                phone: phone
            }
        }

        console.log($scope.personalData);
    }

});

但是现在更奇怪的事情发生了，我在登录时可以看到实际对象为$scope.personalData，但如果我尝试在标记时通过{{personalData}}进行调试，它似乎没有属性。

没关系，我必须在模型上进行验证背景监视或监听。

Answer 1

我建议使用带解析器和格式化程序的指令

为电话号码创建自己的验证

＆＃39;使用严格的＆＃39;;

angular
    .module('MyApp',[])
    .directive('input', inputTel);

var NANP_REGEXP = /^([0-9]{3})([0-9]{7})$/;
function inputTel() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, elem, attr, ctrl) {
            if (ctrl && attr.type === 'tel') {
                ctrl.$parsers.push(function (viewValue) {
                    if(ctrl.$isEmpty(viewValue)){
                        ctrl.$setValidity('tel', true);
                        return viewValue;
                    }
                    var numbers = viewValue? viewValue.replace(/\D/g, "") : '';
                    if (NANP_REGEXP.test(numbers)) {
                        var formatted = numbers.replace(NANP_REGEXP, '$1-$2');
                        if (formatted !== viewValue) {
                            ctrl.$setViewValue(formatted);
                            ctrl.$render();
                        }
                        ctrl.$setValidity('tel', true);
                        return numbers.replace(NANP_REGEXP, '$1$2');
                    } else {
                        ctrl.$setValidity('tel', false);
                        return undefined;
                    }
                });

                ctrl.$formatters.push(function (viewValue) {
                    if(ctrl.$isEmpty(viewValue)){
                        ctrl.$setValidity('tel', true);
                        return viewValue;
                    }
                    var numbers = ctrl.$modelValue? ctrl.$modelValue.replace(/\D/g, "") : '';
                     if (NANP_REGEXP.test(numbers)) {
                        ctrl.$setValidity('tel', true);
                        return numbers.replace(NANP_REGEXP, '$1-$2');
                    } else {
                        ctrl.$setValidity('tel', false);
                        return undefined;
                    }
                });
            }
        }
    };
}

演示http://jsfiddle.net/TheSharpieOne/qhphg0ax/1/

注意：我使用HTML5输入type = tel来帮助确定此验证适用的输入。此验证还允许用户查看格式化输入，同时保持内部值只是数字。

这也暴露了＆＃39; tel＆＃39;的自定义验证错误。在formName.fieldName.$error.tel

为什么ng-pattern在非用户输入事件的更改中无法正确验证？

相关问题。

解决方法

1 个答案: