Блог

Главная - Вопросы по программированию - AngularJS ng-повторяется и показывает ошибки над таблицей

AngularJS ng-повторяется и показывает ошибки над таблицей

#javascript #html #angularjs #angularjs-ng-repeat

#javascript #HTML #angularjs #angularjs-ng-repeat

Вопрос:

Это должен быть относительно простой вопрос (я надеюсь), но я потратил несколько часов прошлой ночью без успеха. Я отображаю строки оборудования в таблице, используя элементы управления ng-repeat и input, и я хотел бы показать ошибки проверки над моей таблицей. Я попробовал следующее:

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

и в моей таблице используется следующий код:

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

Я не могу показать ошибки максимальной длины над таблицей и имею ограниченный успех с повторяющимися ошибками. Я также пытался добавить ng-form в ng-repeat, чтобы отображать каждую строку в отдельной форме, но это тоже не сработало.

Есть идеи, как заставить это работать?

Ответ №1:

Я смог заставить это работать, хотя мне действительно не нравится это обходное решение. Я помещаю

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

и в getDuplicateError я сделал следующее

 $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   "rn";

                        if (equipment.warningMessage)
                            error = error   equipment.warningMessage   "rn";

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

Это позволило мне добиться желаемого поведения.