表单验证不能与ui-boostrap一起使用

Question

我在运行验证函数时遇到了一些问题。我有一个plnkr。我知道我很接近...验证文件正在加载没有错误。它只是没有运行验证部分。我建立它的this。我错过了什么？先谢谢您的帮助。

my Form: 

<form id="phone" class="content-pad span6" novalidate> 

    <div class="control-group" ng-class="{error:!input-form-Phone.phonenumber.$valid}"> 
     <label for="phonenumber">Enter Area Code and Telephone Number</label> 
     <div class="form-group controls"> 
      <input type="text" class="form-control" id="inputphonenumber" name="phonenumber" ng-model="phonenumber" 
        placeholder="Ex: 4155551234" valid-phonenumber/> 
       <div class="help-inline"> 
       <span ng-show="!!phone.phonenumber.$error.isBlank">Phone Number Required.</span> 
       <span ng-show="!!phone.phonenumber.$error.invalidChars">Must Contain Number Only</span> 
       <span ng-show="!!phone.phonenumber.$error.invalidLen">Phone Number Must Contain area Code and Phone Number.</span> 
       </div> 
     </div> 
    </div> 
    <div class="form-actions" ng-show="formAllGood()"> 
    <div class="span6"> 
    <a ng-href="SA_report_results.html" class="btn btn-primary " type="button">Run Report</a> 
    </div> 
    </div> 
     <div class="span3" > 
    <input type="button" value="Reset" ng-click="reloadPage()" class="btn btn-danger "/> 
    </div> 

    </form> 

应用，JS

var app = angular.module('myApp', ['myApp.formValidation','ui.bootstrap']); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 


    $scope.formAllGood = function(){ 
     return ($scope.phonenumberGood); 
    }; 
}); 

验证，JS

angular.module('myApp.formValidation', []) 

.directive('validPhoneNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elm, attrs, ctrl) { 
      ctrl.$parsers.unshift(function (viewValue) { 
       // Any way to read the results of a "required" angular validator here? 
       var isBlank = viewValue === ''; 
       var invalidChars = !isBlank && !/^[A-z]+$/.test(viewValue); 
       var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20); 
       ctrl.$setValidity('isBlank', !isBlank); 
       ctrl.$setValidity('invalidChars', !invalidChars); 
       ctrl.$setValidity('invalidLen', !invalidLen); 
       scope.phonenumberGood = !isBlank && !invalidChars && !invalidLen; 

      }); 
     } 
    }; 
}); 

Answer 1

要调用有效-PHONENUMBER不存在。这是有效的电话号码。这会让你的运动员跑步。

顺便说一句，你的invalidChars检查是错误的。