Question

我正在尝试使用angularjs为美国电话号码编写自定义指令，并且需要将字段的数据类型保存为整数。这是jsfiddle directive，需要帮助来完成指令。

如果用户输入有效的电话号码（正好是10个号码，即1234567890），那么当用户移动到下一个控制时，输入应分成3个块，如123-456-7890。无论如何，我应该显示错误消息“不是有效号码”

<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
    <input type="text" ng-model="telephone" phoneformat  name="input1" />
     <span class="error" ng-show="myForm.input1.$error.telephone">Numbers only!</span>
    <span class="error" ng-show="myForm.input1.$error.telephone">Exact 10 Numbers only!</span>

</form>
</div>

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
$scope.telephone = "1234567890";
}]);

 myApp.directive("phoneformat", function () {
  return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, element, attr, ngModelCtrl) {
        var phoneformat = function () {

        }

      }
    };
 });

Answer 1

您可能希望使用http://angular-ui.github.io/ui-utils/ Mask指令。

Answer 2

工作小提琴：http://jsfiddle.net/HB7LU/6581/

myApp.directive("phoneFormat", function () {

return {
    restrict: "A",
    link: function (scope, element, attr) {

        element.bind('change', function() {
            if ( this.value.length === 10 ) {
               var number = this.value;
               this.value = number.substring(0,3) + '-' + number.substring(3,6) + '-' + number.substring(6,10)
            }
            else {
                document.querySelector('.helpblock').innerHTML = 'error in formatting';
            }
        });

    }
};

}）;

Answer 3

我扩展了你的原始小提琴。这是结果：的 http://jsfiddle.net/10k58awt/

您可以在表单提交上找到splittedNumber数组（包含3部分数字）

<强> JS：

var myApp = angular.module("myApp", []); var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) { $scope.telephone = "1234567890"; $scope.submit = function () { var splittedNumber = [$scope.telephone.substring(0, 3), $scope.telephone.substring(3, 6), $scope.telephone.substring(6, 10)]; // Do something with splitted number console.log(splittedNumber); }; }]); myApp.directive("phoneformat", function () { return { restrict: "A", require: "ngModel", link: function (scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function (phoneInput) { phoneInput = phoneInput.trim(); if (phoneInput && phoneInput.length == 10 && !isNaN(phoneInput)) { ctrl.$setValidity('phoneformat', true); return phoneInput; } else { ctrl.$setValidity('phoneformat', false); return undefined; } }); } }; });

<强> HTML：

<div ng-app="myApp" ng-controller="myCtrl"> <form name="myForm" novalidate ng-submit="myForm.$valid && submit()"> <input type="text" ng-model="telephone" phoneformat name="input1" /> <span class="error" ng-show="myForm.input1.$error.phoneformat">Invalid US Phone number!</span> <div> <button class="btn btn-primary" type="submit" ng-class="{'disabled': !myForm.$valid}">submit</button> </div> </form> </div>

Answer 4

看起来您希望利用表单的$ error属性来驱动验证。为此，您需要在您的指令中需要的ngModelCtrl中调用$ setValidity：

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
    $scope.telephone = "1234567890";
}]);

myApp.directive("phoneformat", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attr, ngModelCtrl) {
            //Parsing is performed from angular from view to model (e.g. update input box)
            //Sounds like you just want the number without the hyphens, so take them out with replace
            var phoneParse = function (value) {
                var numbers = value && value.replace(/-/g, "");
                if (/^\d{10}$/.test(numbers)) {
                    return numbers;
                }

                return undefined;
            }
            //Formatting is done from view to model (e.g. when you set $scope.telephone)
            //Function to insert hyphens if 10 digits were entered.
            var phoneFormat = function (value) {
                var numbers = value && value.replace(/-/g,"");
                var matches = numbers && numbers.match(/^(\d{3})(\d{3})(\d{4})$/);

                if (matches) {
                    return matches[1] + "-" + matches[2] + "-" + matches[3];
                }

                return undefined;
            }

           //Add these functions to the formatter and parser pipelines
           ngModelCtrl.$parsers.push(phoneParse);
           ngModelCtrl.$formatters.push(phoneFormat);

           //Since you want to update the error message on blur, call $setValidity on blur
           element.bind("blur", function () {
                var value = phoneFormat(element.val());
                var isValid = !!value;
                if (isValid) {
                    ngModelCtrl.$setViewValue(value);
                    ngModelCtrl.$render();
                }

                ngModelCtrl.$setValidity("telephone", isValid);
                //call scope.$apply() since blur event happens "outside of angular"
                scope.$apply();
            });
        }
    };
});

工作fiddle。这只是演示ngModel中使用的解析器和格式化程序管道的快速方法，以及$ setValidity - 用于填充$ error字段。

更新：要在多部手机上使用相同的手机验证，请使用带有$ error的表单。请注意，每个输入都有一个与myForm（表单名称）一起使用的唯一名称。两者都使用$ error.telephone：

<form name="myForm">
    Mobile Phone:
    <input type="text" ng-model="mobilephone" phoneformat name="mobilephone" />
    <span class="error" ng-show="myForm.mobilephone.$error.telephone">
       Exact 10 Numbers only!
    </span>
    <br />
    Home Phone:
    <input type="text" ng-model="homephone" phoneformat  name="homephone" />
    <span class="error" ng-show="myForm.homephone.$error.telephone">
        Exact 10 Numbers only!
    </span>
</form>

更新了fiddle。

使用angularjs的电话格式的自定义指令

4 个答案: