錯誤：{「解析」：真正的「}防止啓用AngularJs提交按鈕

Question

嗨親愛的所有AngularJs愛好者，

我在從驗證取一個angularjs問題 我對模式的驗證，長度驗證和創建指令。還要檢查數據在提交按鈕數據庫

退出我使用NG-禁用=但儘管我的所有輸入字段都有效，我的提交按鈕會顯示仍然關閉，因爲我得到的錯誤「FRM $無效。」 { 「parse」：true「}

如果顯示像那樣錯誤：{「」}然後我的提交按鈕啓用 我該如何解決它。

我的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說：在jsfiddle

Returning undefined from a parser means a parse error occurred. In that case, no $validators will run and the ngModel will be set to undefined unless ngModelOptions.allowInvalid is set to true. The parse error is stored in ngModel.$error.parse .

活生生的例子。

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>