Summary of validation - angularjs

Question

I have an Angular form (called saveForm) that has a bunch of text inputs for bound to a variable called billingAddress. Each input looks something like this:
<div class="col-md-4 col-sm-4">
<div class="editor-label">
<label for="billName">Name*</label>
</div>
<div>
<input type="text" class="form-control" title="{{billingAddress.name}}"
id="billName" name="billName" ng-model="billingAddress.name" required />
<span class="field-validation-error"
ng-show="saveForm['billName'].$error.required">
{{saveForm['billName'].$error.message}}
</span>
</div>
</div>
Obviously, I have many more inputs (and each input has a different name like name="billAddress1" or name="billCity"). These are all inside UI Bootstrap <accordion>. In the <accordion-heading> I want to show a message if any of the form validations related to the billing address fail. But I have many inputs, and I want to avoid this currently bloated solution:
<accordion-heading>
Billing Address
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': billingAccordionObj.open
, 'glyphicon-chevron-right': !billingAccordionObj.open}">
</i>
<span class="field-validation-error" ng-show="saveForm['billName'].$error.required
|| saveForm['billAddress1'].$error.required
|| saveForm['billCity'].$error.required"
... all the other fields>
Invalid Billing Address
</span>
</accordion-heading>
Is there any more elegant way to have this summary appear for any error just associated with my billingAddress object? Or am I stuck typing out all of the names of the input fields?

Answer 1

Use a form and use the $error property of the form validation instead of the validation for each single input field:
<form name="MyForm">
<input name="name" ng-model="m.name" required>
<input type="number" min="1" name="age" ng-model="m.age" required>
</form>
If you only got input fields with the required validation and no other validations you can do:
<span ng-show="MyForm.$error.required.length">Invalid</span>
If other validations are present or you want a imo clean solution, define a filter to check if a form is valid:
app.filter('isInvalid', function() {
return function(form) {
return Object.keys(form.$error).length;
}
})
<span ng-show="MyForm | isInvalid">Invalid</span>
Plunker: http://plnkr.co/edit/h63atRf4m4qcFxnlD5JN?p=preview
Edit
If you only want to show the validation message if specific fields are invalid you could only do something like:
app.filter('validateFields', function() {
return function(form, fields) {
for(var i = 0; i < fields.length; i++) {
if(form[fields[i]].$invalid) {
return false;
}
}
return true;
}
})
<div ng-show="!(MyForm | validateFields : ['street', 'city'])">Invalid</div>
Plunker: http://plnkr.co/edit/Dn6Cb0XYHDOTmpMwKNpp?p=preview