Angular - 无法读取未定义的属性“$invalid”答案

【问题标题】：Angular - Cannot read property '$invalid' of undefinedAngular - 无法读取未定义的属性“$invalid”
【发布时间】：2016-05-12 00:18:49
【问题描述】：

我正在使用 Angular 和 typescript 创建登录页面。单击提交按钮时，我希望触发控制器中的login 函数，但如果表单无效，则它只会返回。

这是我第一次使用打字稿，所以每次我尝试放入 if 语句来检查表单是否无效时都会抛出错误Cannot read property '$invalid' of undefined。

这里是html：

<form class="login-form" name="loginForm" ng-submit="vm.login()" novalidate>
     <input type="email" name="email" placeholder="Email" required ng-model="vm.email" ng-class="{true: 'input-error'}[submitted && loginForm.email.$invalid]"/>
     <input type="password" name="password" placeholder="Password" required ng-model="vm.password" ng-class="{true: 'input-error'}[submitted && loginForm.password.$invalid]"/>
     <input type="submit" id="submit" ng-click="submitted=true"/>
</form>

这是编译好的javascript：

var LoginModule;
(function (LoginModule) {
    var LoginController = (function () {
        function LoginController() {
        }
        LoginController.prototype.login = function () {
            if(this.loginForm.$invalid) {
                return;
            }
            console.log("Login was clicked, email is " + this.email + " and password is " + this.password);
        };
        return LoginController;
    })();
    LoginModule.LoginController = LoginController;
})(LoginModule || (LoginModule = {}));
angular.module('loginModule', []).controller('LoginController', LoginModule.LoginController);

看起来常见的问题是人们没有指定表单名称，但这里不是这种情况。有谁知道我为什么会收到这个错误？

【问题讨论】：

标签： angularjs typescript typeerror

【解决方案1】：

您需要表单名称中的控制器别名

<form  name="vm.loginForm" ng-submit="vm.login()" novalidate>

【讨论】：

啊，刚刚开始使用 controllerAs 语法。谢谢！

【解决方案2】：

虽然@charlietfl 的回答对于 OP 的问题是正确的，但如果您错过了输入控件上的 ng-model 属性并且正在使用 ui.bootstrap.showErrors $scope.$broadcast('show-errors-check-validity') 方法，也可能会引发此错误。

作为per the documentation（我的重点）：

.. 具有ngModel 指令的输入控件包含NgModelController 的实例。可以使用输入控件上的 name 属性将此类控件实例发布为表单实例的属性。 name 属性指定表单实例上的属性名称。

【讨论】：