I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link:
but I still can't figure out what I'm doing wrong.
Any advice?
Thanks
<div class="form-group">
<label class="col-md-1" for="totalWeight">Total Weight</label>
<div class="col-md-1">
<input class="form-control" type="number" max="3000" min="0" name="totalWeight" ng-model="totalWeight" ng-change="calcData()" required>
<span style="color:red" ng-class="{ 'has-error':pasteForm.totalWeight.$dirty && pasteForm.totalWeight.$invalid"}>
<br /><span ng-show="pasteForm.totalWeight.$error.required">Total Weight is required!</span>
<span ng-show="pasteForm.totalWeight.$error.max">Max value 3000!</span>
</span>
</div>
<label class="col-md-1" for="num">%Number</label>
<div class="col-md-1">
<input class="form-control" name="num" type="number" min="0" max="100" ng-model="num" ng-minlength="0" ng-change="calcData()" required>
<span style="color:red" ng-show="pasteForm.num.$dirty && pasteForm.num.$invalid">
<br /><span ng-show="pasteForm.num.$error.required">Num is required!</span>
<span ng-show="pasteForm.num.$error.max">Max value 100!</span>
</span>
</div>
</div>
Some of the answers suggest that adding a <form> tag might help resolve the issue. One person pointed out that in one section, their page works despite looking bad, while in another, it looks good but doesn't work as intended.
Can anyone provide further assistance on this matter?
<form ng-controller="someName" class="mainDataDiv" id="someName2" novalidate ng-cloak> //it works here
<form id="main-panel" class="col-lg-12" ng-controller="someName" novalidate ng-cloak> //does not work correctly here