angularjs - Summary of validation -
i have angular form (called saveform
) has bunch of text inputs bound variable called billingaddress
. each input looks 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, have many more inputs (and each input has different name name="billaddress1"
or name="billcity"
). these inside ui bootstrap <accordion>
. in <accordion-heading>
want show message if of form validations related billing address fail. have many inputs, , want avoid 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" ... other fields> invalid billing address </span> </accordion-heading>
is there more elegant way have summary appear error associated billingaddress
object? or stuck typing out of names of input fields?
use form , use $error
property of form validation instead of validation 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 got input fields required
validation , no other validations can do:
<span ng-show="myform.$error.required.length">invalid</span>
if other validations present or want imo clean solution, define filter check if form 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 want show validation message if specific fields invalid like:
app.filter('validatefields', function() { return function(form, fields) { for(var = 0; < 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
Comments
Post a Comment