AngularJS - 类型错误：无法读取未定义的属性 X

Question

我在表单中遇到了两个字段的问题。在页面加载时，它们都返回未定义，并出现以下错误。（请注意，我删除了url和唯一路径名，但保留了核心错误段。）

类型错误：无法读取未定义的属性“card_number”

类型错误：无法读取未定义的属性“ssn”

    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)

错误来自控制器：

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

以下代码创建了它们的形式。

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

感谢您抽出时间查看此内容。

- wavern

Answer 1

如果您希望页面加载时该错误消失，您需要在控制器中一开始就像这样定义formData：

$scope.formData = {};

然而，在页面加载时，当您调用 isCardNumberRequired 和 isSsnRequired 函数时，formData 将不是未定义的，因为它已经被 AngularJS 机制创建。

- lealceldeiro

Answer 2

首先确保您的父对象已在控制器中初始化定义：

$scope.formData = {};

在JavaScript中，并非所有的数据类型都提供了属性length。虽然您的变量$scope.formData.card_number存在且不为undefined，但属性length可能不存在。

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

尝试通过以下方式检查数据类型：

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

- lin

Answer 3

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

请确保在函数中额外初始化您的变量：

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

- Zeynep A.