angular-formly 使用 angular-translate 进行全局验证消息答案

【问题标题】：angular-formly using angular-translate for global validation messageangular-formly 使用 angular-translate 进行全局验证消息
【发布时间】：2016-08-16 14:21:48
【问题描述】：

验证消息可以像这里http://docs.angular-formly.com/v5.2.1/docs/formlyvalidationmessages一样全局配置

我喜欢使用翻译过滤器，以便将书面验证错误翻译成配置的语言。有人知道如何做到这一点吗？

【问题讨论】：

您能否再发布一些代码，说明您将把它们带到哪里并将它们显示给用户？例如是在 JavaScript（服务、控制器等）还是模板中？

标签： angularjs angular-translate angular-formly

【解决方案1】：

假设您使用这样的东西来设置您的验证消息：

var field = {
  type: 'whatever',
  templateOptions: {
    pattern: /some_crazyPattern/,
    patternValidationMessage: '"Needs to match " + options.templateOptions.pattern'
  }
};

使用角度翻译，在js代码中可以使用$translate：

$translate('some.message').then(function(response) {
  var field = {
    type: 'whatever',
    templateOptions: {
      pattern: /some_crazyPattern/,
      patternValidationMessage: response.some.message + 'options.templateOptions.pattern'
    }
  };
});

这有帮助吗？

【讨论】：

【解决方案2】：

如果您使用验证器定义字段，则可以使用：

validators: {
  validUntilDateAfterValidFromDate: {
    expression: (viewValue, modelValue) =>  this.validateValidUntilDate(modelValue),
    message: '"some.translate.code" | translate'
  }
}

如果您想通过将 formlyValidationMessages 添加到您的 formly 配置来使用更通用的方法，您可以向您的 formlyconfigprovider 添加一个包装器：

formlyConfigProvider.setWrapper({
  name: "field-message",
  templateUrl: "/app/formly/wrappers/field-message.html"
});

使用 field-message.html：

<formly-transclude></formly-transclude>
<div class="messages" ng-messages="fc.$error" ng-if="fc.$touched">
  <div class="alert alert-danger"
     ng-message="{{::name}}"
     ng-repeat="(name, message) in ::options.validation.messages"
     translate>
    {{message(fc.$viewValue, fc.$modelValue, this)}}
  </div>
</div>

【讨论】：