AngularJS中$scope获取表单数据报错：Cannot read 'firstName' of undefined

这个报错其实很直白——你在尝试读取$scope.passenger.firstName的时候，$scope.passenger根本还没被定义，是个undefined，自然没法访问它的firstName属性啦。

通常遇到这种问题，主要有这几个解决方向：

• 提前初始化$scope.passenger对象
  这是最直接的办法，在你的controller里，比如在定义proceedARS方法之前，先给$scope.passenger赋一个空对象：

  // 在controller的合适位置添加
  $scope.passenger = {};
  

  AngularJS不会自动帮你创建嵌套的对象，所以必须先把父对象passenger创建出来，视图里的ng-model="passenger.firstName"才能正确绑定。

• 检查视图中的绑定是否正确
  确认你的表单输入框的ng-model路径完全正确，比如有没有把firstName写成小写的firstname，或者把passenger拼错成别的单词？比如正确的绑定应该是这样：

  <input type="text" ng-model="passenger.firstName" placeholder="请输入乘客姓名" />
  

• 在方法里加安全校验
  如果你不想提前初始化对象，也可以在proceedARS方法里先判断$scope.passenger是否存在，再去访问它的属性：

  $scope.proceedARS = function() {
    // 先确保passenger存在，再处理
    if ($scope.passenger && $scope.passenger.firstName) {
      // 这里写你的业务逻辑
      console.log('乘客姓名：', $scope.passenger.firstName);
    } else {
      console.log('乘客信息未正确初始化，请检查');
    }
  };
  

一般来说，第一种方法是最常用也最稳妥的，提前初始化对象能避免很多类似的嵌套属性访问错误。

内容的提问来源于stack exchange，提问作者Bikal Nepal