CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Ali Murtaza
Ali Murtaza

Reputation: 221

Ng repeat error on form validating angularjs dupes

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

Upvotes: 2

Views: 433

Answers (1)

PSL
PSL

Reputation: 123739

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.

Upvotes: 2

Related Questions