Question

我正在尝试实现Angular异步验证。基本的工作，但我不明白如何将验证结果从控制器传递到我的模板。

通过我的PHP Laravel服务器进行的HTTP / post调用工作正常。处理我的响应的处理程序。我不明白的是如何通过＆＃34;成功/失败＆＃34;从控制器到我的模板的状态。待处理状态正常，但如何显示确定/失败消息???

问题：将异常验证中的确定/失败状态传递给模板的正确模式是什么？

在我的控制器和模板之后。请注意，OPACFG超出了范围，它是我用来将信息从Laravel传递到Angular的常量。

我的控制器

   app.directive ('myValidationWithBackend', ['OPACFG', '$http','$q', function(OPACFG, $http, $q) {
    result= {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {
            ngModel.$asyncValidators.username = function(modelValue, viewValue) {
                var value = modelValue || viewValue;
                var handler = $http.post('check-device', {_token: OPACFG.token, username: value});
                handler.success(function(data, status, headers, config) {
                    console.log ("handler ok");
                    $q.reject ('hoops');
                });
                handler.error(function(data, status, headers, config) {
                    console.log ("handler err");
                    return true;
                });
                return handler;
            };
        }
    }; return result; } ]);

我的模板

 <div   ng-controller="NewDeviceCtrl">
    <div class="errors">
          <ul>
          <li>xxxxxx</li>
          <li data-ng-show="myForm.val1.$error.required">Value missing in val1</li>
          <li data-ng-show="myForm.val2.$error.myValidationDataError">Invalid val2 should start with 'A'</li>
          <li data-ng-show="myForm.val3.$error.????">Invalid val3</li>
          <li data-ng-show="myForm.val3.$pending">Waiting val 3 response</li>

          </ul>
   </div>
   <!-- Form name used for valid nd-model for data association in controller -->
   <form novalidate name="myForm"ng-submit="submitForm(myForm.$valid)" >
        <input type="hidden" ng-model="form._token">
        <input type="text" name="val1" ng-model="form.val1" required>
        <input type="text" name="val2" ng-model="form.val2" ng-model-options="{updateOn:'blur'}" required my-validation-data-input>
        <input type="text" name="val3" ng-model="form.val3" ng-model-options="{updateOn:'blur'}" required my-validation-with-backend>
      <button type="submit" class="sucess button small" >DoIt</button>
     </form>
   </div>

Answer 1

当使用$ asyncValidators时，$ q.reject实际上并没有做任何事情。$ error，它改为myForm.username。$ invalid：true和myForm.username。$ invalid：false。虽然myForm.username。$ pending存在，但$ invalid或$ valid都不存在。所以你应该能够继续使用$ q.reject并在你的html put ..

 <li data-ng-show="myForm.username.$invalid">Invalid val3</li>

那有道理吗？如果需要，我可以详细介绍。

Angular $ asyncValidators将错误代码传输到模板

1 个答案: