Angular - Multiple fields in ng-messages

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>