AngularJS - TypeError: Cannot read property X of undefined

Question

I'm having an issue with 2 fields within a Form. They both return as undefined on page load with the following errors. (note I removed url and unique path name but left the core error segment.)

TypeError: Cannot read property 'card_number' of undefined

TypeError: Cannot read property 'ssn' of undefined

    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)

The error is coming from the controller:

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

They are being created in a form with the following code.

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

Thank you for taking time to look.

lealceldeiro · Accepted Answer · 2017-02-01 14:09:21Z

2

In your controller you need to defined formData at the beginning like this if you want that error to disappear on page load:

$scope.formData = {};

Nevertheless, when page loads, and you call functions isCardNumberRequired and isSsnRequired formData will not be undefined since it was already created by the AngularJS mechanism.

answered Feb 1, 2017 at 14:09

lealceldeiro

15.1k7 gold badges55 silver badges85 bronze badges

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

Comments

lin · Accepted Answer · 2017-02-01 14:22:27Z

1

First ensure your parent object is defined by initializing it in your controller:

$scope.formData = {};

Well, attribute length is not provided by all data types in JavaScript. While your variable $scope.formData.card_number exists and is not undefined the attribute length may doesnt exists.

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

Try check the datatype by:

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

edited Feb 1, 2017 at 14:22

answered Feb 1, 2017 at 14:14

lin

18.5k4 gold badges66 silver badges88 bronze badges

Comments

Zeynep A. · Accepted Answer · 2019-01-03 14:55:15Z

0

https://docs.angularjs.org/guide/migration#commit-bcd0d4

Make sure to initialize your variables in your function in an extra:

this.$onInit = function() { 
   //initialize here
};

answered Jan 3, 2019 at 14:55

Zeynep A.

1

Collectives™ on Stack Overflow

AngularJS - TypeError: Cannot read property X of undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related