ng-messages default error message - angularjs

Question

Is it possible to have ng-messages + ng-message display a default error message?
For instance:
<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>
I would like "There's something wrong with number!" to show up if there's any error besides required.
Is that possible?

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 Demo:
http://plnkr.co/edit/aIJ1W8qTGiKHLJYJg0fe?p=preview

Answer 2

I wrote a directive that accomplishes a lot of the boiler plate stuff for validations. It includes allowing for a default message:
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));
}
}
}
});
It's pretty simple to use:
<form name="myForm">
<input show-errors data-se-required="Field required"
data-se-default="Field Invalid"
name="myInput" ng-minlength="10" required />
</form>
The directive will automatically generate all of the html. It uses a div and labels, but can be adapted to use ngMessages if you want. JSFiddle is being a bit wonky at the moment. I'll try and add a working link tomorrow.

Answer 3

ngMessageExp is what you are after. This will show the 'other' error message when there is an error, but not the 'required' error.
<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>
You will have to add each error type to the list, but you should know what validations you are using. In this case, only min and max.
If you find yourself repeating that generic catch all error message then consider using ngMessageInclude that has the when-exp for all validation types that you use.