Сводка валидации

Question

У меня есть угловая форма (называемая saveForm), которая имеет кучу текстовых входов для привязки к переменной, называемой billingAddress. Каждый вход выглядит примерно так:

<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> 

Очевидно, что у меня есть еще много входов (и каждый вход имеет другое название, как name="billAddress1" или name="billCity"). Все это внутри UI Bootstrap <accordion>. В <accordion-heading> я хочу показать сообщение, если какая-либо из проверок формы, связанных с платежным адресом, терпит неудачу. Но у меня есть много входов, и я хочу, чтобы избежать этого в настоящее время раздутое решения:

<accordion-heading> 
    Billing Address &nbsp;&nbsp;&nbsp; 
    <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': billingAccordionObj.open 
              , 'glyphicon-chevron-right': !billingAccordionObj.open}"> 
    </i> 
    &nbsp;&nbsp;&nbsp; 
    <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> 

Есть ли более элегантный способ иметь это резюме появляться какой-либо ошибка, связанной только с моим billingAddress объектом? Или я застрял, набрав все имена полей ввода?

Answer 1

Используйте форму и использовать $error свойство формы проверки вместо проверки для каждого отдельного поля ввода:

<form name="MyForm"> 
    <input name="name" ng-model="m.name" required> 
    <input type="number" min="1" name="age" ng-model="m.age" required> 
</form> 

Если вы получили только поля ввода с required проверки и никаких других подтверждений вы можете сделать :

<span ng-show="MyForm.$error.required.length">Invalid</span> 

Если другие валидация присутствуют или вы хотите имо чистое решение, определить фильтр, чтобы проверить, если форма является действительным:

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

Редактировать

Если вы хотите, чтобы показать сообщение проверки, если конкретные поля недействительны вы могли бы сделать только что-то вроде:

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