Question

嗨亲爱的所有AngularJs爱好者，

我从验证中获取angularjs问题。我创建模式验证指令，长度验证以及检查数据是数据库中的退出

在提交按钮中我使用 ng-disable ='frm。$ invalid'但是虽然我的所有输入字段都有效，但我的提交按钮显示仍然禁用，因为我收到错误：{“parse” ：真“}

如果显示错误：{“”} ，则启用提交按钮我怎么能解决它。

我的HTML用户界面看起来像

 <div class="row">
                        <label for="f1_normal_input">
                            <strong>Country Code </strong>
                        </label>
                        <div  style="margin-left: 196px;">
                          <input ng-required="true"
                              ng-class="{'error': !!frm.countrycode.$error.isBlank || !!frm.countrycode.$error.invalidLen || !!frm.countrycode.$error.isvalidPattern || !!frm.countrycode.$error.requiredUniquevalue,
                              'valid':!!frm.countrycode.$dirty && !frm.countrycode.$error.isBlank && !frm.countrycode.$error.invalidLen && !frm.countrycode.$error.isvalidPattern  && !!frm.countrycode.$error.requiredUniquevalue}" id="CustomerCode" name="countrycode" ng-model="Country.country_code" type="text"  valid-code />
                                errors : {{frm.countrycode.$error}}
                             <div class="help-inline">
                                <div class="error-icon icon" ng-show="!!frm.countrycode.$error.isBlank" style="right: 5.99998px; top: 33.5px;"></div>
                                <label ng-show="!!frm.countrycode.$error.isBlank" for="v1_normal_input" generated="true" class="error " style="right: -0.000349609px; top: 55px;">This field is required.</label>
                                <label class="error inline" ng-show="!!frm.countrycode.$error.invalidLen">Must be 2-3 characters.</label>
                                <label class="error inline" ng-show="!!frm.countrycode.$error.isvalidPattern">Pattern is not matched exeample(USA)!!</label>
                                <div class="valid-icon icon" ng-show="!!frm.countrycode.$dirty && !frm.countrycode.$error.isBlank && !frm.countrycode.$error.invalidLen && !frm.countrycode.$error.isvalidPattern && !!frm.countrycode.$error.requiredUniquevalue" style="right: 5.99998px; top: 33.5px;"></div>
                                <label class="error inline" ng-show="!!frm.countrycode.$dirty && !frm.countrycode.$error.isBlank && !frm.countrycode.$error.requiredUniquevalue">This country is already exits !!.</label>

                            </div>
                        </div>
                    </div>``

我的指令看起来像

angular.module('UserValidation', []).directive('validCode', function($http) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {

                var isBlank = viewValue === '';
                var invalidLen = !isBlank && (viewValue.length < 2 || viewValue.length > 3);
                var isvalidPattern = !isBlank && !invalidLen && !/^[A-Z]{2,3}/.test(viewValue);
                ctrl.$setValidity('isBlank', !isBlank);
                ctrl.$setValidity('invalidLen', !invalidLen);
                ctrl.$setValidity('isvalidPattern', !isvalidPattern);
                $http({
                        method: 'POST',
                        url: '/api/BasicData/CountryCode?code=' + viewValue,
                        data: viewValue
                }).success(function(res) {
                    if (res) {

                            ctrl.$setValidity('requiredUniquevalue', true);//exits in database
                        } else {
                            ctrl.$setValidity('requiredUniquevalue', false);// not exits
                        }
                    }).error(function(err) {
                        ctrl.$setValidity('requiredUniquevalue', false);
                    });
            });
        }
    }
})

有什么问题吗？

Answer 1

正如我在上面的评论中所写，您必须返回验证功能的值。

正如documentation所说：

从解析器返回undefined表示发生了解析错误。在这种情况下，除非$validators设置为true，否则不会运行ngModel，undefined将设置为ngModelOptions.allowInvalid。解析错误存储在ngModel.$error.parse。
中

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.name = ""
  }).directive('validCode', function($timeout) {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {

          var isBlank = viewValue === '';
          var invalidLen = !isBlank && (viewValue.length < 2 || viewValue.length > 3);
          var isvalidPattern = !isBlank && !invalidLen && !/^[A-Z]{2,3}/.test(viewValue);
          ctrl.$setValidity('isBlank', !isBlank);
          ctrl.$setValidity('invalidLen', !invalidLen);
          ctrl.$setValidity('isvalidPattern', !isvalidPattern);
          ctrl.$setValidity('requiredUniquevalue', true);
          //simulate $http call
          if (!isvalidPattern && !invalidLen && !isBlank) {
            $timeout(function() {
              ctrl.$setValidity('requiredUniquevalue', !(viewValue == "AA" || viewValue == "BB"));
            }, 2000);
          }
          return viewValue;
        });
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <form name="testForm">
      <input name="myName" ng-model="name" valid-code>
      <pre>{{testForm.myName.$error}}</pre>
    </form>
  </div>
</div>

errors：{“parse”：true“}阻止AngularJs中的启用提交按钮

1 个答案: