正式输入字段验证答案

【问题标题】：Formly input field validation正式输入字段验证
【发布时间】：2018-12-04 17:55:33
【问题描述】：

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

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';
  //    }
  //  }
  //},
}

我能否获得一些关于为什么该消息不会出现的提示？

【问题讨论】：

标签： javascript angularjs validation angular-formly

【解决方案1】：

仔细查看错误模板中formcontrol条件的设置方式（特别是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。

【讨论】：