Question

我有一个异步的Formly字段验证函数，它以多种形式使用，并检查字段的多个方面。我希望能够＆＃34;返回＆＃34; （在一般意义上）来自字段验证功能的错误文本，其中详细说明了该字段的错误。

最好的方法是什么？我猜我想将文本发布到范围内，但我不知道在哪里。我已经挖掘了所有的例子（我想）并且没有看到任何密切关系。

Answer 1

我通过formlyValidationMessages和fieldWrapper的组合来完成此操作。初始配置非常令人生畏，但会产生一个非常灵活的验证系统，允许您处理同步和异步验证错误。大部分帖子都是由官方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所以它们可以是字符串或函数。

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

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

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

要向用户显示此信息，请为使用ngMessages为您的字段创建每个字段错误列表的字段创建一个hasError包装。

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，则会出现异步验证错误，但如果将其留空，则会得到同步验证错误。

Answer 2

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

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

您可以使用检查唯一性来创建指令，并检查指令是否已触发，并使用ng-show仅在需要时显示该指令。

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

Formly验证函数应如何导致错误消息？

2 个答案: