javascript - 正式输入字段验证

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 (config) 函数都不适用于该字段。他们什么也不做，即使有一个有效的模式，该字段仍然显示它是无效的(突出显示为红色)。

{
  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部分)。

<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 .