有登录表单时无法提交表单
Unable to submit form when having Login form
我有以下代码,但我无法触发 - ng-submit 或 ng-click 除了登录按钮上的本地 onclick 功能。如果您知道好的解决方案或能够识别问题,请告诉我:
<form ng-submit = "login.submitLoginForm(login.user)" novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email"
ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password"
ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login">Login</button>
</p>
</form>
vm.submitLoginForm = submitLoginForm;
function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.UserName + 'pwd..' + user.pwd);
if(user.userName != '' || user.userName != 'undefined'){
vm.user.userName = user.userName;
console.log("UserName..form.." + user.userName + vm.user.userName);
ServiceFactory.setUserName(vm.user.userName);
}
if(user.pwd != '' || user.pwd != 'undefined'){
vm.user.pwd = user.pwd;
console.log("UserName..pwd.." + user.pwd + vm.user.pwd);
ServiceFactory.setPwd(vm.user.pwd);
}
initialize();
};
'use strict';
angular
.module('app', [])
.controller('LoginCtrlr', LoginCtrlr);
function LoginCtrlr() {
var vm = this;
vm.user = {
userName: '',
pwd: ''
};
vm.submitLoginForm = function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.userName + ' vm userName: ' + vm.userName);
if (user.userName != '' || user.userName != 'undefined') {
vm.userName = user.userName;
console.log("UserName..form.." + user.userName + ' vm. userName: ' + vm.userName);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<section class="container" ng-controller="LoginCtrlr as login">
<div>
<p class="or">Or</p>
<p class="login">your email</p>
<form novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password" ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login" ng-click="login.submitLoginForm(login.user)">Login</button>
</p>
<div>{{ login.message }}</div>
</form>
</div>
<p class="note-text-center-xs">By continuing, you accept the terms of Use and Privacy Policy</p>
<div class="login-help-center-xs">
<p><a href="#">Forgot your password?</a>
</p>
</div>
<p class="no-account" onclick="#">You Don't have an account yet? Sign up</p>
</a>
</section>
</div>
我尝试创建完整的代码片段。依赖模块已删除,因为并非所有模块都可以通过代码片段访问。
我改变了什么:
- 定义新的'app'模块使用[](方括号)
在将对象分配给模型时需要调用控制器,因为您将所有控制器的方法和属性定义到它自己而不是使用 $scope。例如:
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">
我有以下代码,但我无法触发 - ng-submit 或 ng-click 除了登录按钮上的本地 onclick 功能。如果您知道好的解决方案或能够识别问题,请告诉我:
<form ng-submit = "login.submitLoginForm(login.user)" novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email"
ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password"
ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login">Login</button>
</p>
</form>
vm.submitLoginForm = submitLoginForm;
function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.UserName + 'pwd..' + user.pwd);
if(user.userName != '' || user.userName != 'undefined'){
vm.user.userName = user.userName;
console.log("UserName..form.." + user.userName + vm.user.userName);
ServiceFactory.setUserName(vm.user.userName);
}
if(user.pwd != '' || user.pwd != 'undefined'){
vm.user.pwd = user.pwd;
console.log("UserName..pwd.." + user.pwd + vm.user.pwd);
ServiceFactory.setPwd(vm.user.pwd);
}
initialize();
};
'use strict';
angular
.module('app', [])
.controller('LoginCtrlr', LoginCtrlr);
function LoginCtrlr() {
var vm = this;
vm.user = {
userName: '',
pwd: ''
};
vm.submitLoginForm = function submitLoginForm(user) {
// submitLoginForm...
console.log("UserName..form.." + user.userName + ' vm userName: ' + vm.userName);
if (user.userName != '' || user.userName != 'undefined') {
vm.userName = user.userName;
console.log("UserName..form.." + user.userName + ' vm. userName: ' + vm.userName);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<section class="container" ng-controller="LoginCtrlr as login">
<div>
<p class="or">Or</p>
<p class="login">your email</p>
<form novalidate>
<p>
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">
</p>
<p>
<input class="password" type="password" name="password" value="" placeholder="Password" ng-model="login.user.pwd">
</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">Remember me</label>
</div>
<p>
<button class="login" type="submit" name="Login" value="Login" ng-click="login.submitLoginForm(login.user)">Login</button>
</p>
<div>{{ login.message }}</div>
</form>
</div>
<p class="note-text-center-xs">By continuing, you accept the terms of Use and Privacy Policy</p>
<div class="login-help-center-xs">
<p><a href="#">Forgot your password?</a>
</p>
</div>
<p class="no-account" onclick="#">You Don't have an account yet? Sign up</p>
</a>
</section>
</div>
我尝试创建完整的代码片段。依赖模块已删除,因为并非所有模块都可以通过代码片段访问。
我改变了什么:
- 定义新的'app'模块使用[](方括号)
在将对象分配给模型时需要调用控制器,因为您将所有控制器的方法和属性定义到它自己而不是使用 $scope。例如:
<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">