AngularJS - TypeError: Kann die Eigenschaft X von undefined nicht lesen

Question

Ich habe ein Problem mit 2 Feldern innerhalb eines Formulars. Beide kehren beim Laden der Seite mit den folgenden Fehlern als nicht definiert zurück. (Beachten Sie, ich entfernt url und einzigartige Pfadnamen, aber den Kern Fehler Segment links.)

Typeerror: kann Eigenschaft ‚card_number‘ undefinierter

Typeerror lesen: Kann nicht lesen Eigentum ‚ssn‘ undefinierter

at r.$scope.isSsnRequired (/js/ng-app/components/controller.js:67:23) 
    at Object.fn [as get] (eval at <anonymous> (/js/angular.min.js:216:110), <anonymous>:4:230) 
    at r.$digest (/js/angular.min.js:131:156) 
    at r.$apply (/js/angular.min.js:134:236) 
    at /js/angular.min.js:20:59 
    at Object.e [as invoke] (/js/angular.min.js:39:431) 
    at c (/js/angular.min.js:19:482) 
    at zc (/js/angular.min.js:20:274) 
    at ce (/js/angular.min.js:19:83) 
    at HTMLDocument.<anonymous> (/js/angular.min.js:297:355) 

der Fehler kommt von der Steuerung:

$scope.isCardNumberRequired = function() 
{ 
    if (!(angular.isUndefined($scope.formData.ssn))) 
    {   
     if ($scope.formData.ssn.length > 0) 
     { 
      return false; 
     } 
    } 

    return true; 
}; 

$scope.isSsnRequired = function() 
{ 
    if (!(angular.isUndefined($scope.formData.card_number))) 
    { 
     if ($scope.formData.card_number.length > 0) 
     { 
      return false; 
     } 
    } 

    return true; 
}; 

Sie werden in einer Form mit dem folgenden Code erstellt werden.

<form id="mainFormId" method="post" class="form" role="form" name="mainForm" novalidate> 
     <div class="row form-group"> 
      <div class="control-label col-xs-4">Card #</div> 
      <div class="col-xs-8"> 
        <input 
         type="text" 
         class="form-control" 
         name="card_number" 
         ng-model="formData.card_number" 
         ng-class="{'admin_error_field_bold_border': mainForm.card_number.$invalid && mainForm.$submitted}" 
         ng-required="isCardNumberRequired()" 
         ng-maxlength="16" 
         ng-pattern="/^\d{16}$/" 
        /> 
        <div ng-show="mainForm.$submitted"> 
         <span class="text-danger" ng-show="mainForm.card_number.$error.maxlength">Allowed maximum length is 16 digits.<br /></span> 
         <span class="text-danger" ng-show="mainForm.card_number.$error.pattern">Card # is invalid.<br /></span> 
        </div> 
      </div> 
     </div> 

     <div class="row form-group"> 
      <div class="control-label col-xs-4">SSN</div> 
      <div class="col-xs-8"> 
       <input 
        type="text" 
        class="form-control" 
        name="ssn" 
        ng-model="formData.ssn" 
        ng-class="{'admin_error_field_bold_border': mainForm.ssn.$invalid && mainForm.$submitted}" 
        ng-required="isSsnRequired()" 
        ssn 
       /> 
       <div ng-show="mainForm.$submitted"> 
        <span class="text-danger" ng-show="mainForm.ssn.$error.ssn">Invalid SSN.<br /></span>        
       </div> 
      </div> 
     </div> 
    </form> 

Vielen Dank, dass Sie sich die Zeit genommen haben.

Answer 1

In Ihrem Controller, den Sie definiert formData am Anfang brauchen wie diese, wenn Sie möchten, dass Fehler beim Laden der Seite verschwinden:

$scope.formData = {}; 

Dennoch, wenn Seite geladen wird, und Sie rufen Funktionen isCardNumberRequired und isSsnRequiredformData werden nicht undefiniert sein, da es bereits vom AngularJS-Mechanismus erstellt wurde.

Answer 2

zunächst sicher, Ihr übergeordnetes Objekt durch Initialisieren es in Ihrem Controller definiert:

$scope.formData = {}; 

Nun, Attribut length nicht von allen Datentypen in JavaScript vorgesehen ist. Während Ihre Variable $scope.formData.card_number existiert und nicht undefined ist, existiert das Attribut length möglicherweise nicht.

var aString = 'test'; //string.length === 4 
var aNumber = 0; // 
var anArray = []; 
var anObject = {}; 

console.log(aString.length); // 4 
console.log(aNumber.length); // undefined 
console.log(anArray.length); // 0 
console.log(anObject.length); // undefined 

Versuchen Sie überprüfen den Datentyp von:

console.log(typeof $scope.formData.card_number);