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

Question

我在 AngularJS 端和服务端都使用验证（例如，用于重复值检查），并希望向用户公开这些错误。如果没有ng-fab-form，我能够构建自定义服务器错误指令并像这样使用它：

<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 as 语法并将错误分配给每个字段：

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

我自定义了validation template 以显示服务器错误消息，但是，我无法显示动态错误文本。我想这个问题与范围继承有关。有什么想法可以达到预期的效果吗？

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

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

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;
      };
    }
  };
});

（取自docs的示例）

然后您可以将消息添加到您自己的验证模板中：

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

要获得更简洁的解决方案，必须有一个接口，但该接口尚不存在，但您始终可以open an issue for that。