AngularJS表單驗證 - 類型錯誤：無法設置undefined的屬性'integer'

Question

我跟着這個tutorial（自定義驗證），並且當我使用AngularJS自定義驗證加載我的html表單時出現此錯誤。我正在使用一個叫做'integer'的指令來驗證我的表單中的數字輸入。

我不知道爲什麼我得到這個錯誤，因爲我在整數之前有另一個personnal指令（excel cell validation），並且沒有錯誤。

這裏是我的電話號碼輸入：

<input type="number" ng-model="param.lineAct" class="form-control" min="0" integer /> 

我的指令：

var INTEGER_REGEXP = /^-?\d+$/; 
adcAppDirectives.directive('integer', function() { 
    return { 
     require: 'ngModel', 
     link : function (scope, elm, attrs, ctrl) { 
      ctrl.$validators.integer = function (modelValue, viewValue){ 
       if (ctrl.$isEmpty(modelValue)) { return false}; 
       if (INTEGER_REGEXP.test(viewValue)) {return true}; 
       return false; 
      }; 
     } 
    }; 
}); 

這是錯誤的樣子：

TypeError: Cannot set prpoerty 'integer' of undifined at link 127.0.0.1/Symfony/web/app_dev.php/js/…) input <type="number" ng-model="param.lineAct" class="form-control ng-pristine ng-valid" min="0" integer=""> 

編輯：這裏是整個指令的javascript file：

var adcAppDirectives = angular.module('adcAppDirectives', []); 

var INTEGER_REGEXP = /^\-?\d+$/; 
var EXCELCEL_REGEXP = /^[A-Z]+[0-9]+/; 
var EXCELCELS_REGEXP = /^[A-Z]+[0-9]+:[A-Z]+[0-9]+/; 
var EXCELCOL_REGEXP = /^[A-Z]+/; 

adcAppDirectives.directive('integer', function() 
{ 
    return { 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.integer = function (modelValue, viewValue) { 
       if (ctrl.$isEmpty(modelValue)){ 
        return false; 
       } 
       if (INTEGER_REGEXP.test(viewValue)) { 
        return true; 
       } 
       return false; 
      } 
     } 
    }; 
}); 

adcAppDirectives.directive('excel-cel', function() 
{ 
    return { 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.excel_cel = function (modelValue, viewValue) { 
       if (ctrl.$isEmpty(modelValue)){ 
        return false; 
       } 
       if (EXCELCEL_REGEXP.test(viewValue)) { 
        return true; 
       } 
       return false; 
      }; 
     } 
    }; 
}); 

adcAppDirectives.directive('excel-cels', function() 
{ 
    return { 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.excel_cels = function (modelValue, viewValue) { 
       if (ctrl.$isEmpty(modelValue)){ 
        return false; 
       } 
       if (EXCELCELS_REGEXP.test(viewValue)) { 
        return true; 
       } 
       return false; 
      }; 
     } 
    }; 
}); 

adcAppDirectives.directive('excel-col', function() 
{ 
    return { 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.excel_col = function (modelValue, viewValue) { 
       if (ctrl.$isEmpty(modelValue)){ 
        return false; 
       } 
       if (EXCELCOL_REGEXP.test(viewValue)) { 
        return true; 
       } 
       return false; 
      }; 
     } 
    }; 
}); 

和HTML：

<form name="form" novalidate class="simple-form"> 
          <div class="form-group"> 
           <div class="col-lg-6"> 
            Nom: <input type="text" ng-model="param.Name" class="form-control" /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="col-lg-6"> 
            Plage de paramètres: <input type="text" ng-model="param.paramTitle" class="form-control" excel-cels /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="col-lg-6"> 
            Ligne des traitements: <input type="number" ng-model="param.lineAct" class="form-control" min="0" integer /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="col-lg-6"> 
            Colonne de la DIR: <input type="text" ng-model="param.dirCol" class="form-control" excel-col /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <button type="button" class="btn btn-success col-lg-offset-6 col-lg-2">Valider</button> 
          </div> 
          </form> 

Answer 1

升級到AngularJS的最新版本：formController.$validators在角1.3

是新的。如果你不能，請參閱您的文檔。這裏是1.2的表單指南：https://code.angularjs.org/1.2.28/docs/guide/forms