Question

我的html页面中有一个简单的输入：

<input type="text" class='form-control' id='card' name="myCard" ng-model='form.cardNb' card-validation>

我创建了一个功能＆＃39; cadType＆＃39;它根据此输入中的第一个char返回一个值：

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

        mainApp.controller('formController', function($scope) {
           $scope.form = {
              cardNb: "",
              nameOnCard: "",
              expiryDate: "",
              CVV:  "",
              cardType: function() {
                 var firstCharCard;
                 var secondCharCard;
                 firstCharCard = $scope.form.cardNb.charAt(0);
                 secondCharCard = $scope.form.cardNb.charAt(1);
             //some additional logic here...

（此时功能正常，没问题）

然后，我创建了一个新的验证器来对此输入进行一些验证：

    mainApp.directive('cardValidation', function() {
    return {

        require: 'ngModel',

        link: function($scope, element, attributes, ngModel) {
            ngModel.$validators.cardValidation = function(value) {  
                return (value.length == 13);
            };
        }
    }
});

此验证工作正常，但我的功能不再适用！填写输入时出现此错误：

TypeError: Cannot read property 'charAt' of undefined
    at Object.$scope.form.cardType (index.html:86)
    at ib.functionCall (angular.js:12404)
    at Object.<anonymous> (angular.js:12813)
    at n.$get.n.$digest (angular.js:14300)
    at n.$get.n.$apply (angular.js:14571)
    at eg.$$debounceViewValueCommit (angular.js:23391)
    at eg.$setViewValue (angular.js:23363)
    at HTMLInputElement.l (angular.js:19784)
    at HTMLInputElement.c (angular.js:3032)

我认为我的验证使我的范围无法实现......我能为此做些什么？

非常感谢:)。

Answer 1

验证器的工作原理是，如果验证失败，它们会创建模型。

如果长度不是13，那么基础模型将被清除form.cardNb。

因此，在您的函数中，您应该在使用charAt之前显式检查cardNb是否为null。

Angular验证器使我的$ scope不可用？

1 个答案: