Kann 'xxyx'-Eigenschaft von undefiniert nicht lesen, auch wenn Element existiert

Question

Ich habe zwei HTML-Eingaben (type="email", type="number") und meine Angular-App beobachtet sie mit $formatters und $parsers. Die Fehler werden in einem Array gespeichert und wenn Benutzer eine E-Mail einfügen, die "@gmail" enthält, wird der Fehler aus dem Array entfernt.

app.controller('form1Controller', function($scope, UserService) { 
    $scope.formCompleted = false; 
    $scope.errors = UserService.errors; 

    //handle the user email input. 
    $scope.storeEmailErr = function(data) { 

     var correctKey = "@gmail"; 
     var key = "#userEmail"; 

     var res = {}; 

     if (data != null) { 
      res = $scope.handleError(data, emailIn, correctKey, key, $scope.errors); 
      $scope.errors = res[0]; 
      UserService.errors = res[0]; 
      emailIn = res[1]; 
     } 
    }; 

    //handle the user email input. 
    $scope.storeIdErr = function(data) { 

     var correctKey = "0000"; 
     var key = "#userId"; 

     var res = {}; 

     if (data != null) { 
      res = $scope.handleError(data, idIn, correctKey, key, $scope.errors); 
      $scope.errors = res[0]; 
      idIn = res[1]; 
     } 

    }; 
} 

Dies ist der Code, der Fehler aus dem Array hinzufügt und entfernt. Und hier nehme ich an, um das Problem

function theIndexOf(val) { 
    console.log("find index in array of length: " + errorsDescription.length) 
    for (var i = 0; i < errorsDescription.length; i++) { 
    if (errorsDescription[i].selector === val) { 
     return i; 
    } 
    } 
} 

app.run(function($rootScope){ 
$rootScope.handleError = function(data, elemIn, correctKey, key, errorArray){ 
    var idx = theIndexOf(key); 
    console.log("get index >>>>> " + idx); 
    var obj = errorsDescription[idx]; 

    //if user didn't put correct word i.e. @gmail or 0000 
    if (data.indexOf(correctKey) < 0) { 
     if (!elemIn) { 
      errorArray.push(obj); 
      elemIn = true; 
     } 
    } else { 
     if (elemIn) { 
      $.each(errorArray, function(i){ 
       if(errorArray[i].selector === key) { 
        errorArray.splice(i, 1); 
        elemIn = false; 
       } 
      }); 
     } 
    } 
    return [errorArray, elemIn]; 
} 
}); 

Das Problem ist, dass, wenn ich einfügen dh „test@gmail.com“, wird der Fehler aus dem Array gelöscht und wenn ich richtig Daten einfügen wieder sagt es mir, dass nicht lesen kann 'yyy' Eigenschaft von undefined.

Hier ist mein Plunker. https://plnkr.co/edit/l0ct4gAh6v10i47XxcmT?p=preview

Im Plunker, geben Sie in den ‚Test @ gmail‘ Felder und test0000 für die Nummer, dann Daten entfernen, dann wieder die gleichen Daten einfügen würde das Problem zu sehen

Jede Hilfe sehr geschätzt!

Answer 1

EDIT: Arbeits plunkr hier: https://plnkr.co/edit/8DY0Cd5Pvt6TPVYHbFA4

Die Frage ist hier:

var obj = errorsDescription[idx]; 

//if user didn't put correct word i.e. @gmail or 0000 
if(data.indexOf(correctKey) < 0){ 
    // console.log("You must put correct word"); 
    if(!elemIn){ 
     errorArray.push(obj); 
     elemIn = true; 
    } 
} 

Wenn Sie Ihre persönliche Nummer Fehler entfernt wird, über die Logik schiebt undefiniert zu Ihrem errorArray (weil elemIn falsch ist). Ihre storeIdErr methond:

$scope.storeIdErr = function(data){ 

    var correctKey = "0000"; 
    var key = "#userId"; 

    var res = {}; 

    if(data != null){ 
     res = $scope.handleError(data, idIn, correctKey, key, $scope.errors); 
     $scope.errors = res[0]; 
     idIn = res[1]; 
    } 

}; 

liest diesen Wert (res [0]) und speichert sie in scope.errors $, die letztlich auf das nächste Eingabeereignis iteriert durch:

function theIndexOf(val){ 
    console.log("find index in array of length: " + errorsDescription.length) 
    for(var i = 0; i < errorsDescription.length; i++){ 
     if(errorsDescription[i].selector === val){ 
      return i; 
     } 
    } 
} 

aufgrund Ihrer Fabrik, die dieses Objekt zurückgibt, wenn nach Fehlern gefragt wird. Um dies zu beheben, sollten Sie eine statische Liste behalten, die nie entfernt wird und die Fehlerdefinitionen enthält. Darauf sollten Sie sich beziehen, wenn Sie in Ihrem ersten Codeblock auf errorArray drücken.

Answer 2

Das Problem, das Sie haben, ist mit diesem Code-Block hier:

$.each(errorArray, function(i){ 
    if(errorArray[i].selector === key) { 
     errorArray.splice(i, 1); 
     elemIn = false; 
    } 
}); 

Wenn Sie splice aufrufen, können Sie die Länge des Feldes zu ändern. $.each ist eine Schleife über die Länge des Arrays und ist sich der Längenänderung nicht bewusst. (Ich kenne nicht die interne Funktionsweise von $.each, aber ich vermute, es speichert die Länge des Arrays vor dem Start, aus Leistungsgründen.) Also, nachdem Sie den ersten Fehler splice, läuft die Schleife noch ein zweites Mal . Zu diesem Zeitpunkt ist errorArray[1] nicht mehr vorhanden, was Ihren undefinierten Fehler verursacht.

Sehen Sie diese Frage als Referenz: Remove items from array with splice in for loop