为什么 Angular 使用的对象未定义？答案

【问题标题】：Why is an object utilized by Angular undefined?为什么 Angular 使用的对象未定义？
【发布时间】：2016-08-26 09:37:56
【问题描述】：

我对 Angular 还是很陌生。这是我正在开发的控制器...

svs.controller('registrationCtrl', function($scope, validatorService) {
  $scope.$watch("registrationForm.email.value", function(newValue, oldValue) {
    if (validatorService.validateEmail(newValue))  {
      $scope.registrationForm.email.valid = true;
    } else {
      $scope.registrationForm.email.valid = false;
    }
  });
});

在关联视图中，有一个用于用户电子邮件的文本输入。它设置为让 Angular 使用 $scope.registrationForm.email.value 作为模型。似乎是这样，好像我从 $watch 函数中删除了所有内容，只做一个简单的控制台日志，每当我更改文本输入的值时它都会记录。

这里的想法是在$scope.registrationForm 有一个看起来与此类似的对象...

{
  email: {
    value: "someEmail@emailProvider.com",
    valid: true
  }
}

我正在尝试查看文本区域的值，使用服务方法验证电子邮件，并在有效时将registrationForm.email 的valid 属性设置为true。

很遗憾，我遇到了一个错误...

TypeError: Cannot read property 'email' of undefined

我没有在 JavaScript registrationForm.email.valid 中明确定义，也没有在我的视图的 HTML 中引用它。

我需要在设置之前创建此属性吗？这是怎么回事？

【问题讨论】：

标签： javascript angularjs validation object undefined

【解决方案1】：

是的，您必须在设置之前创建一个属性。

$scope.email={};

【讨论】：

你是对的。我最终做的是创建一个具有创建表单对象的方法的服务。谢谢。

【解决方案2】：

您不必这样做，因为... Angular 已经做到了。您需要的只是将属性名称添加到表单和输入中。

    <script>
  angular.module('emailExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.email = {
        text: 'me@example.com'
      };
    }]);
</script>
  <form name="myForm" ng-controller="ExampleController">
    <label>Email:
      <input type="email" name="input" ng-model="email.text" required>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
    </div>
    <tt>text = {{email.text}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
  </form>

更多详情here

【讨论】：