Question

以下是我的领域的一个简单示例：

{
  key: 'name',
  type: 'input',
  validators: {
    nameValid: {
      expression: function(viewValue, modelValue){
        var value = modelValue || viewValue;
        return (some condition on value);
      },
      message: '$viewValue + " is not a valid string"'
    }
  },
  templateOptions: {
    label: 'Name',
    placeholder: 'Name',
    options: [],
    required: true
  },
  validation: {
    messages: {
      required: function(viewValue, modelValue, scope) {
        return scope.to.label + ' is required';
      }
    }
  }
},

我为特定条件和必要的字段条件设置了验证消息。但是，如果未满足我的条件或未填写该字段，则不会显示任何错误消息。该字段只是变为红色（应该如此），但是如何让它也显示我的错误消息？

Answer 1

添加错误模板，然后重试，如果您可以提供jsbin链接进行调试，那就更好了。

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

Answer 2

您可以在app.config函数中将包装器设置为输入字段以显示错误消息。

app.config(function (formlyConfigProvider)({
      formlyConfigProvider.setWrapper({
         name: 'validation',
         types: ['input'],
         template:'<formly-transclude></formly-transclude><div ng-messages="fc.$error" ng-if="form.$submitted || 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>'
        //templateUrl: 'error-messages.html'
});}};

Angular Formly - 不显示错误消息

2 个答案: