user1030181 user1030181 -4 years ago 102
AngularJS Question

How to display error on top of page instead of displaying beside input html element

How to display error on top of page instead of display errors beside input html element. Please suggest.

<ng-form name="frmdisbursementScheduleMaintenance">
<div style="padding-bottom: 8px;">
<button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
<button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
</div>
<div>
<table>

<tr>
<td><span class="VNAVLabel">Process Begin Date: </span></td>
<td>
<span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
<span ng-show="(frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) && frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
Process Begin Date is required
</span>
</td>
</tr>

</table>
</div>

</ng-form>

Answer Source

You have all the form's errors in form.$error.

Simply iterate on the errors and show wherever you want. Like:

<ul>
  <li ng-repeat="(key, errors) in form.$error track by $index">{{ key }} errors :
    <ul>
      <li ng-repeat="error in errors">{{ error.$name }}-{{ key }}</li>
    </ul>
  </li>
</ul>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download