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
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 (eg 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>
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.
Just use
<div ng-if="registrationForm.field1.$error.required || registrationForm.field2.$error.required">
<span class="required">please enter field 1</span>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.