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

您正在调用不存在的有效电话号码。这是有效的电话号码。这将使你的plunker运行。

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

表单验证不适用于ui-bootstrap

1 个答案: