Question

我遇到了应用程序中出现的验证消息的问题。这是应用程序演示：

https://jsfiddle.net/MrPolywhirl/yxrh3ujp/

我尝试过添加验证配置。这直接来自docs。

app.run(function(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';

  formlyValidationMessages.addTemplateOptionValueMessage('pattern', 'patternValidationMessage', '', '', 'Invalid Input');
});

我在我的字段上设置了最小值/最大值。该字段确实已正确验证，但仍未显示该消息。

pattern / patternValidationMessage和validation（配置）功能都不适用于该字段。它们什么都不做，即使有效模式，该字段仍显示它无效（突出显示为红色）。

{
  key: 'cooldown',
  type: 'input',
  templateOptions: {
    type: 'number',
    label: 'Cooldown (in seconds)',
    min : 0,
    max : 600,
    required: true,
    //pattern: /^[0-9]+$/,
    //patternValidationMessage: '"Needs to match " + options.templateOptions.pattern'
  },
  defaultValue: 30,
  //validation: {
  //  messages: {
  //    required: function ($viewValue, $modelValue, scope) {
  //      return scope.to.label + ' is required';
  //    }
  //  }
  //},
}

我可以获得一些关于消息不会出现的原因吗？

Answer 1

仔细研究如何在错误模板（尤其是ng-if部分）中设置formcontrol条件。

<script type="text/ng-template" id="error-messages.html">
      <formly-transclude></formly-transclude>
      <div ng-messages="fc.$error" ng-if="options.formControl.$invalid && options.formControl.$touched" class="error-messages">
        <div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue, fc.$modelValue, this)}}</div>
      </div>
</script>

同样，您在应用程序配置中编写setWrapper方法的方式看起来很凌乱，因此我将代码删除到了单独的模板中，并将模板指向此处。

看看更新的 jsfiddle 。

形式输入字段验证

1 个答案: