Question

是否可以让ng-messages + ng-message显示默认错误消息？

例如：

.masonry {
     margin: 1.5em 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

#client-feedbacks .feedback-box {
        display: inline-block !important;
        width: 100% !important;
        float:none !important;
        -webkit-column-break-inside: avoid; 
        page-break-inside: avoid; 
        break-inside: avoid; 
}

我想＆＃34;数字有问题！＆＃34;显示除之外是否有任何错误。

这可能吗？

Answer 1

<form name="myForm">
  <input type="number" name="number" min="10" max="100" required ng-model="number" />
</form>
<div ng-show="myForm.number.$error">
  <div ng-show="myForm.number.$error.required">Number is required</div>
  <div ng-show="!myForm.number.$error.required && myForm.number.$error" >There's something wrong with number!</div>
</div>

Plnkr演示： http://plnkr.co/edit/aIJ1W8qTGiKHLJYJg0fe?p=preview

Answer 2

我写了一个指令，完成了许多用于验证的锅炉板材。它包括允许默认消息：

angular.module('validations').directive('showErrors', function() {
    return {
      restrict: 'A',
      require: '^form',
      link: function(scope, el, attrs, ngModelCtrl) {
        var data = el.data();
        var inputName = el.attr('name');
        if (!inputName)
          return;

        var baseFormName = ngModelCtrl.$name;
        var baseFieldName = baseFormName + '.' + inputName + '.$error.';

        var validationMessages = '';
        var validators = {};

        var defaultValidationConditions = [];
        var defaultValidationMessage = '';

        angular.forEach(data, function (value, key) {
          if (key.indexOf('se') === 0 && key[2] === key[2].toUpperCase()) {
            var validationProperty = key.substring(2).toLowerCase();

            // if this is the default message, just grab it and keep looping.
            if (validationProperty === 'default') {
              defaultValidationMessage = value;
              return;
            }

            var condition = baseFieldName + validationProperty;

            if (!validators[value]) {
              validators[value] = [];
            }
            validators[value].push(condition);

            // if we have a message for this error, we want to exclude it from the default
            defaultValidationConditions.push('!' + condition);
          }
        });

        defaultValidationConditions.push([baseFormName, '.', inputName, '.$invalid'].join(''));

        angular.forEach(validators, function (conditions, message) {
          var conditionString = conditions.join(' || ');

          validationMessages += '<label ng-show="' + conditionString + '" class="error">' + message + '</label>';
        });

        // if a default validation message was specified, we need to create a label
        if (defaultValidationMessage) {
          validationMessages += '<label ng-show="' + defaultValidationConditions.join(' && ') + '" class="error">' + defaultValidationMessage + '</label>';
        }

        if (validationMessages) {
          el.after(this.$compile('<div ng-show="' + baseFormName + '.' + inputName + '.$dirty">' + validationMessages + '</div>')(scope));
        }
      }
    }
});

使用非常简单：

<form name="myForm">
    <input show-errors data-se-required="Field required" 
           data-se-default="Field Invalid"
           name="myInput" ng-minlength="10" required />

</form>

该指令将自动生成所有html。它使用div和标签，但如果你愿意，可以适应使用ngMessages。 JSFiddle目前有点不稳定。我明天会尝试添加一个工作链接。

Answer 3

ngMessageExp就是你所追求的。这将在出现错误时显示“其他”错误消息，但不会显示“必需”错误。

<ng-messages for="myForm.number.$error">
  <ng-message when="required">Number is required</ng-message>
  <ng-message when-exp="['min', 'max']">There's something wrong with number!</ng-message>
</ng-messages>

您必须将每种错误类型添加到列表中，但您应知道您正在使用的验证。在这种情况下，只有最小和最大

如果您发现自己重复该通用捕获所有错误消息，请考虑使用对您使用的所有验证类型具有when-exp的ngMessageInclude。

ng-messages默认错误消息

3 个答案: