2015-10-14 184 views
1

是否可以讓ng消息+ ng消息顯示默認錯誤消息?ng消息默認錯誤消息

例如:

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

你必須每個錯誤類型添加到列表中,但你應該知道什麼驗證您正在使用。在這種情況下,只有最小值和最大值

如果您發現自己重複該通用捕獲所有錯誤消息,然後考慮使用ngMessageInclude,它具有您使用的所有驗證類型的when-exp。