Angular - Multiple fields in ng-messages - angularjs

Question

I'm using ng-messages and want to know if its possible to check across multiple fields in one block of code rather than having to repeat:
So I have:
(note checkCustom is a custom directive I have wrote)
<div ng-messages="registrationForm.field1.$error" ng-if="registrationFormValid">
<span ng-message="required">please enter field 1</span>
<span ng-message="checkCustom">please check custom value</span>
</div>
and
<div ng-messages="registrationForm.field2.$error" ng-if="registrationFormValid">
<span ng-message="required">please enter field 1</span>
<span ng-message="checkCustom">please check custom value</span>
</div>
However I'd much rather something like:
<div ng-messages="registrationForm.field1.$error || registrationForm.field2.$error" ng-if="registrationFormValid">
<span ng-message="required">please enter field 1</span>
<span ng-message="checkCustom">please check custom value</span>
</div>
Is something like this possible?
Thanks

Answer 1

A form's controller has a handy property called $error. This is an object hash, containing references to controls or forms with failing validators, where its keys are the error names (e.g. email, required, minlength, etc) and their values are arrays of controls or forms that have a failing validator for given error name - source.
This means that we can globaly check for an error inside a form just by examining if this $error object contains a specific key name.
Have a look at this example:
angular.module('myApp', ['ngMessages']);
[ng-cloak] {
display: none !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp" ng-cloak>
<form name="myForm">
<div class="form-group">
<h3>Validation messages:</h3>
<div ng-messages="myForm.$error" multiple>
<div ng-message="required" class="alert alert-danger">There's at least one <strong>required</strong> field</div>
<div ng-message="minlength" class="alert alert-danger">There's at least one field which doesn't fulfill the <strong>minlength</strong> condition</div>
<div ng-message="email" class="alert alert-danger">The form contains an invalid <strong>email</strong> input</div>
</div>
</div>
<div class="form-group">
<label>Required Input 1</label>
<input type="text" ng-model="myModel1" required>
</div>
<div class="form-group">
<label>Required Input 2</label>
<input type="text" ng-model="myModel2" required>
</div>
<div class="form-group">
<label>Required Input 3 which has min-length="3"</label>
<input type="text" ng-model="myModel3" required ng-minlength="3">
</div>
<div class="form-group">
<label>Required Input 4 which is type="email"</label>
<input type="email" ng-model="myModel4" required>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>

Answer 2

If you don't want to add same messages in all the blocks and add it in a single place you can do something like this:
Add all the messages in a file
<!-- remote file: error-messages.html --><div ng-message="required">please enter field 1</div>
<div ng-message="checkCustom">please check custom value</div>
Just include that file where ever you want.
<div ng-messages="registrationForm.field1.$error" ng-messages-include="error-messages.html">
</div>
So the code is reused. For a different error message override that message inside the block.
For more information check this amazing blog post.
I don't think you can add two fields in a single ng-messages block.

Answer 3

Just use
<div ng-if="registrationForm.field1.$error.required || registrationForm.field2.$error.required">
<span class="required">please enter field 1</span>
</div>