Angular.js: re-use your validation messages

One really handy trick with Angular's ng-messages module is the ability to re-use messages. Instead of specifying the list with possible validation messages over and over again for every form field, just create one HTML template and load that:

	<div ng-message="required">This field is required</div>
	<div ng-message="minlength">Input too short</div>
	<div ng-message="odd">Odd number expected</div>
	<div ng-message="email">This field must be an email</div>

view raw errors.html hosted with ❤ by GitHub

	<form name="beerOrderForm">
	<input type="email" name="email" ng-model="email" required minlength="5" />
	<div ng-messages="beerOrderForm.email.$error" ng-messages-include="~/Views/Shared/Errors.html">
	</div>
	<input type="number" name="nrOfBottles" ng-model="nrOfBottles" required odd />
	<div ng-messages="beerOrderForm.nrOfBottles.$error" ng-messages-include="~/Views/Shared/Errors.html">
	</div>
	</form>

view raw form.cshtml hosted with ❤ by GitHub

In case you don’t want a generic validation message or want to add extra validation messages, this remains possible as well:

	<form name="beerOrderForm">
	<input type="email" name="email" ng-model="email" required minlength="5" />
	<div ng-messages="beerOrderForm.email.$error" ng-messages-include="~/Views/Shared/Errors.html">
	</div>
	<input type="number" name="nrOfBottles" ng-model="nrOfBottles" required odd />
	<div ng-messages="beerOrderForm.nrOfBottles.$error" ng-messages-include="~/Views/Shared/Errors.html">
	<div ng-message="required">Please specify the number of bottles you want to order</div>
	<div ng-message="odd">Odd number of bottles expected</div>
	</div>
	</form>

view raw formsWithExtraMessages.cshtml hosted with ❤ by GitHub