2015-10-14 4 views
1

Возможно ли, что ng-messages + ng-message отобразит сообщение об ошибке по умолчанию?ng-message сообщение об ошибке по умолчанию

Например:

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

Я хотел бы "Там что-то не так с номером!" если есть какая-либо ошибка , кроме.

Возможно ли это?

+0

Не уверен относительно общего решения, но большинство ошибок в числах относятся к свойству '$ error.number'. – ryanyuyu

ответ

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

+0

Эта технически работает, но не очень удобна в обслуживании, если у вас было больше ошибок, которые вы хотели показать. – Paul

+0

да, я бы согласился на это. Я тоже смотрю, как это сделать, когда у вас больше ошибок –

1

Я написал директиву, которая завершала много котельной пластину материала для валидаций. Она включает в себя позволяя сообщение по умолчанию:

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 немного завораживает. Я попытаюсь добавить рабочую ссылку завтра.

0

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> 

Вы должны добавить каждый тип ошибки в списке, но вы должны знать , что валидация вы используете. В этом случае только min и max.

Если вы обнаружите, что повторяете это общее сообщение об ошибке, рассмотрите возможность использования ngMessageInclude, имеющего значение when-exp для всех типов проверки, которые вы используете.

Смежные вопросы