Formly 验证函数应如何提供错误消息？

Question

我有一个异步的 Formly 字段验证函数，它用于多个表单并检查字段的多个方面。我希望能够 "return"（一般意义上）来自字段验证函数的错误文本，准确说明该字段的错误。

最好的方法是什么？我猜想我想将文本发送到范围内，但我不确定在哪里。我已经仔细研究了所有示例（我认为），但没有看到任何相关的内容。

Answer 1

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

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

您创建带有唯一性检查的指令并检查指令是否被触发并使用 ng-show 仅在需要时显示它。

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

Answer 2

我通过 formlyValidationMessages and a fieldWrapper. The initial configuration is pretty daunting, but results in a pretty flexible validation system that allows you to handle synchronous and asynchronous validation errors the same. Most of this post was cobbled together from the official async Validation example.

的组合来做到这一点

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'        
}

这些是 Formly Expressions，因此它们可以是字符串或函数。

这基本上是在 angular 表单中设置了对字段错误属性的监视。如果该字段的表单中存在错误（例如 form.field.$error.required === true），它会将最大值添加到您的字段配置对象中的 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>'
  })
})

Here is a plunker 有一个使用 bootstrap 样式的功能示例。如果您输入 123，您将得到一个异步验证错误，但如果您将其留空，您将得到一个同步错误。

Formly 验证函数应如何提供错误消息？

How should a Formly validation function contribute to error messages?

angularjs

angular-formly