angularJs ng-repeat and showing errors above the table

Question

This should be relatively simple question (I hope) but I spent several hours last night without a success. I'm displaying equipment rows in a table using ng-repeat and input controls and I'd like to show validation errors above my table. I tried the following:

 <div class="col-xs-12" ng-show="equipmentDuplicatesForm.$invalid"> <div class="info-text-block info-text-block-error"> <p ng-show="(equipmentDuplicatesForm.assetNo.$error.smDuplicate || equipmentDuplicatesForm.assetNo.$error.duplicate)"> {{getDuplicateError()}} </p> <p ng-show="equipmentDuplicatesForm.assetNo.$error.maxlength"> @string.Format(Messages.cannotExceed, Labels.assetNo, "100") </p> <p ng-show="equipmentDuplicatesForm.serialNo1.$error.maxlength"> @string.Format(Messages.cannotExceed, Labels.serialNo1, "100") </p> </div> 

and my table is using the following code:

 <tbody infinite-scroll="loadMore()"> <tr ng-repeat="row in duplicatesArray" ng-click="selectedDuplicateIndex=$index;" ng-class="{selected: $index === selectedDuplicateIndex}"> <td style="text-align:center;"> <input type="checkbox" name="checkRow" ng-model="row.isSelected"/> </td> <td> <span ng-if="row.barcode>0">{{row.barcode}}</span> <span>{{$index}}</span> <span class="pull-right"> <i class="fa fa-trash" style="color:red;" ng-click="removeRow($index)" title="@Labels.delete"></i> </span> </td> <td> <div class="col-xs-12"> <input type="text" name="assetNo" id="assetNo" ng-model="row.assetNo" class="form-control" ng-change="checkAssetNo(row)" ng-maxlength="100" sm-duplicate-validator validate-duplicates="true" error-message="row.errorMessage" api-method="api/rentalEquipments/checkForDuplicate" primary-key-value="row.equipmentId" ng-model-options="{ debounce: { default : 500, blur: 0 }}" /> </div> </td> <td> <input type="text" name="serialNo1" id="serialNo1" ng-model="row.serialNo1" class="form-control" ng-maxlength="100" /> </td> 

I'm unable to show maxlength errors above the table and have limited success with duplicate errors. I also tried to add ng-form to the ng-repeat to show each line in a separate form, but this didn't work either.

Any ideas of how to make it work?

Answer 1

I was able to make it work even though I really don't like this workaround solution. I put

 <div class="col-xs-12" ng-show="equipmentDuplicatesForm.$invalid"> <div class="info-text-block info-text-block-error"> <p ng-show="getDuplicateError()"> {{validationError}} </p> <p ng-show="equipmentDuplicatesForm.assetNo.$error.maxlength || isAssetNoMaxLenError"> @string.Format(Messages.cannotExceed, Labels.assetNo, "100") </p> <p ng-show="equipmentDuplicatesForm.serialNo1.$error.maxlength || isSerialNo1MaxLenError"> @string.Format(Messages.cannotExceed, Labels.serialNo1, "100") </p> <p ng-show="equipmentDuplicatesForm.serialNo2.$error.maxlength || isSerialNo2MaxLenError"> @string.Format(Messages.cannotExceed, Labels.serialNo2, "100") </p> <p ng-show="equipmentDuplicatesForm.serialNo3.$error.maxlength || isSerialNo3MaxLenError"> @string.Format(Messages.cannotExceed, Labels.serialNo3, "100") </p> <p ng-show="equipmentDuplicatesForm.serialNo4.$error.maxlength || isSerialNo4MaxLenError"> @string.Format(Messages.cannotExceed, Labels.serialNo4, "100") </p> </div> </div> 

and in the getDuplicateError I made the following

 $scope.getDuplicateError = function () { let error = ""; $scope.selectedDuplicateIndex = 0; $scope.isAssetNoInError = false; $scope.isAssetNoMaxLenError = false; $scope.isSerialNo1MaxLenError = false; $scope.isSerialNo2MaxLenError = false; $scope.isSerialNo3MaxLenError = false; $scope.isSerialNo4MaxLenError = false; $scope.validationError = ""; for (let i = 0; i < $scope.duplicatesArray.length; i++) { const equipment = $scope.duplicatesArray[i]; if (equipment.errorMessage) error = error + equipment.errorMessage + "\\r\\n"; if (equipment.warningMessage) error = error + equipment.warningMessage + "\\r\\n"; if (_.isUndefined(equipment.assetNo)) { if (equipment.errorMessage) { $scope.isAssetNoInError = true; } else { $scope.isAssetNoMaxLenError = true; } } if (_.isUndefined(equipment.serialNo1)) $scope.isSerialNo1MaxLenError = true; if (_.isUndefined(equipment.serialNo2)) $scope.isSerialNo2MaxLenError = true; if (_.isUndefined(equipment.serialNo3)) $scope.isSerialNo3MaxLenError = true; if (_.isUndefined(equipment.serialNo4)) $scope.isSerialNo4MaxLenError = true; } $scope.validationError = error; return error.length > 0; }; 

This allowed me to achieve desired behavior.