3

我有一个异步 Formly 字段验证函数，它用于多种表单并检查该字段的多个方面。我希望能够从字段验证函数中“返回”（一般意义上的）错误文本，该函数准确地说明了该字段的问题。

最好的方法是什么？我猜我想将文本发送到范围内，但我不确定在哪里。我已经挖掘了所有的例子（我认为）并且没有看到任何密切相关的东西。

4

2 回答 2

4

我通过formlyValidationMessages和 fieldWrapper 的组合来做到这一点。初始配置非常令人生畏，但产生了一个非常灵活的验证系统，允许您以相同的方式处理同步和异步验证错误。这篇文章的大部分内容都是从官方异步验证示例拼凑而成的。

formlyValidationMessages 允许您为典型的验证错误配置一些默认错误消息。这是我在项目中使用的示例

angular.module('myModule', ['formly']).run(formlyValidationMessages){
    formlyValidationMessages.messages.required = 'to.label + " is required"'
    formlyValidationMessages.messages.max = '"The max value allowed is " + to.max'
    formlyValidationMessages.messages.min = '"The min value allowed is " + to.min'        
}

这些是形式表达式，因此它们可以是字符串或函数。

这基本上设置了角度形式的字段错误属性的监视。如果该字段的表单中有错误（例如form.field.$error.required === true），它会将 max 添加到您的字段配置对象中的 validation.messages 中。

如果您需要特定字段的特定错误，可以将其添加到字段定义中。例如

var field = {
    key: 'serialNumber',
    type: 'input'
    ....
    validation: {
      messages: {
        unique: function() {
          return 'Serial number 123 is not unique'
        }
      }
    }
    asyncValidators: {
      unique: {
          expression: function(modelValue, viewValue, scope) {
            return $timeout(
              function(){
                if(modelValue === '123') {
                  throw 'unique failure: 123'  //throw to reject promise
                }
              },
              1000
            )
          }
      }
    }
}

要将其显示给用户，请为您的字段创建一个 hasError 包装器，该包装器使用ngMessages为您的字段创建每个字段的错误列表。

module.config(function(formlyConfigProvider) {
  formlyConfigProvider.setWrapper({
    name: 'hasError',
    template: '<div class="form-group" ng-class="{\'has-error\': showError}">' +
      '  <label class="control-label" for="{{id}}">{{to.label}}</label>' +
      '  <formly-transclude></formly-transclude>' +
      '  <div ng-messages="fc.$error" ng-if="showError" class="text-danger">' +
      '    <div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue)}}</div>' +
      '  </div>' +
      '</div>'
  })
})

这是一个 plunker，它有一个使用引导样式的功能示例。如果您输入 123，您将收到一个异步验证错误，但如果您将其留空，您将收到一个同步验证错误。

于 2016-05-06T04:23:25.563 回答
0

Angular 支持使用自定义验证，例如，您想检查用户名的唯一性，您可以创建自己的指令来执行此操作。

像这个例子：https ://docs.angularjs.org/guide/forms

您可以通过检查唯一性来创建指令，并检查指令是否被触发并ng-show仅在需要时才显示它。

<span ng-show="form.name.$error.username">This username is already taken!</span>

于 2015-09-30T20:39:08.217 回答