AngularJS ng-fab-form的服务器错误

Question

我在AngularJS端和服务端使用验证(例如，重复值检查)，并希望向用户公开这些错误。没有吴某-表格，我就能够构建自定义服务器错误指令，并像这样使用它：

<input type="number" id="level" name="level" ng-model="vm.record.level"
  server-error
  required>
<div ng-messages="vm.form.role_level.$error">
  <p ng-message="server">{{ vm.errors.level }}</p>
</div>

但图书馆的目标是消除这种重复。如您所见，当保存/更新模型失败时，我使用Controller作为语法并将错误分配给每个字段：

angular.forEach(result.data.errors, function (errors, field) {
  vm.form[field].$setValidity('server', false);
  vm.errors[field] = errors.join(', ');
});

我定制了验证模板以显示服务器错误消息，但是我无法显示动态错误文本。我认为这个问题与范围继承有关。有什么想法，我如何才能达到预期的效果？

Answer 1

我刚找到了一种方法

添加自定义属性，以保存服务器错误消息值并查看其中的错误。

<input type="number" id="level" name="level" ng-model="vm.record.level"
  validation="{{ vm.errors.level }}
  server-error
  required>

在验证模板中，显示属性值。

<li ng-message="server">{{ attrs.validation }}</li>

Answer 2

我建议使用$asyncValidators而不是$setValidity (从角@1.3.2开始)。

app.directive('username', function($q, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
    var usernames = ['Jim', 'John', 'Jill', 'Jackie'];

      ctrl.$asyncValidators.username = function(modelValue, viewValue) {

        if (ctrl.$isEmpty(modelValue)) {
          // consider empty model valid
          return $q.when();
        }

        var def = $q.defer();

        $timeout(function() {
          // Mock a delayed response
          if (usernames.indexOf(modelValue) === -1) {
            // The username is available
            def.resolve();
          } else {
            def.reject();
          }

        }, 2000);

        return def.promise;
      };
    }
  };
});

(示例取自文档)

然后，您只需将消息添加到您自己的验证模板：

angular.module('exampleApp', [
    'ngFabForm'
])
    .config(function (ngFabFormProvider)
    {
        ngFabFormProvider.extendConfig({
            validationsTemplate : 'path/to/your-fabulous-validation-template.html'
        });
    });

在模板中添加：

<li ng-message="username">I'm not valid!!! ;(</li>

在模块的github页面上也有这样的问题：https://github.com/johannesjo/ng-fab-form/issues/34。

为了获得更干净的解决方案，必须有一个接口，这个接口还不存在，但是您可以始终使用为这件事打开一个问题。