Ng repeat error on form validating angularjs dupes

Question

I'm doing some custom validation and showing the errors with ngDialog. But for some reason in getting this error:

Error: [ngRepeat:dupes] http://errors.angularjs.org/undefined/ngRepeat/dupes?p0=error%20in%20checkoutError&p1=string%3Ae
    at Error (native)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:6:453
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:180:90
    at Object.fn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:95:475)
    at g.$digest (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:96:367)
    at g.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:99:100)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:108:229
    at e (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:33:182)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:36:388

and it shows a empty popup. When I add track by index in the repeat it shows the popup with a error but then each letter of the sentence is on a new line... it sees each letter as a value in a array for some reason. This is what i do:

CONTROLLER method

$scope.submitCheckout = function() {
    //** Validate **//
    $scope.checkoutError = [];
    //Check deliverytimne
    if ($scope.deliverytime == '0') {
      $scope.checkoutError = "Selecteer een bezorgtijd";
      ngDialog.open({
        template: 'error',
        scope: $scope,
        controller: 'Checkout',
        className: 'ngdialog-theme-plain',
        closeByDocument: false
      });
    }

    if($scope.checkoutError.length > 0){   
      ngDialog.open({
        template: 'error',
        scope: $scope,
        controller: 'Checkout',
        className: 'ngdialog-theme-plain',
        closeByDocument: false
      });
    }

the popup contains:

<dl>
  <dt ng-repeat="error in checkoutError" style="padding:5px;color:red;">&diams; {{error}}</dt>
</dl>

and form does submitCheckout on submit...

PSL · Accepted Answer · 2014-09-21 14:48:12Z

2

You need to push the error to the array instead of setting it as string.

ie. change

$scope.checkoutError = "Selecteer een bezorgtijd";

to

$scope.checkoutError.push("Selecteer een bezorgtijd");

otherwise ng-repeat will iterate through the characters of the string and try display them, since string in js is array of chars, so in this case the tracking of ngrepeated items will happen on the char of the entire string so it finds e to be a duplicate and it fails. It is also preferable to use a track by a unique value, say $index or someId (and attach them as error object with id and message), just so it does not use the string itself as id to be tracked. Otherwise if you have same messages in the array you will end up getting duplicate error again.

answered Sep 21, 2014 at 14:48

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ng repeat error on form validating angularjs dupes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related