我正在使用angular和typescript创建一个登录页面。单击提交按钮时,我希望控制器中的login
函数可以触发,但如果表单无效则会返回。
这是我第一次使用typescript,所以每当我尝试输入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);
看起来常见的问题是人们没有指定表单名称,但这不是这里的情况。有谁知道为什么我会收到这个错误?
答案 0 :(得分:3)
您需要表单名称
中的控制器别名<form name="vm.loginForm" ng-submit="vm.login()" novalidate>
答案 1 :(得分:0)
虽然@ charlietfl的答案对于OP的问题是正确的,但如果您错过了输入控件上的ng-model
属性并使用ui.bootstrap.showErrors
$scope.$broadcast('show-errors-check-validity')
,则也会抛出此错误方法
作为per the documentation(我的重点):
.. 具有
ngModel
指令的输入控件包含NgModelController
的实例。可以使用输入控件上的name属性将此类控件实例发布为表单实例的属性。 name属性指定表单实例上的属性名称。