登录表单时无法提交表单

Posted 2023-05-09

【中文标题】登录表单时无法提交表单

【英文标题】：Unable to submit form when having Login form

【发布时间】：2016-09-11 19:02:08

【问题描述】：

我有以下代码，我无法触发 - 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();
            
        ;

【问题讨论】：

尝试在 UI 级别将 LoginCtrlr 与 ng-controller 连接..

我已经在 - route - config.$inject = ['$routeProvider', '$locationProvider', '$httpProvider']; function config($routeProvider, $locationProvider, $httpProvider) $routeProvider .when('/', controller: 'LoginCtrlr', templateUrl: 'views/login.html', controllerAs: 'login' ) .otherwise(重定向到：'/');

是的，你有它，但只需尝试将它附加到 UI 级别一次。我之前遇到过这个问题..

它没有帮助 :( 还有，我可以为 $http 等调用控制器中的其他函数。只有点击和表单有问题。

【参考方案1】：

'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>

我尝试创建完整的代码片段。依赖模块已被删除，因为并非所有人都可以通过代码片段访问。

我改变了什么：

定义新的“应用”模块使用 []（方括号）

当您将对象分配给模型时，您需要调用控制器，因为您将所有控制器的方法和属性定义到它自己而不是使用 $scope。例如：

<input class="username-email" type="email" name="username" value="" placeholder="Your Email" ng-model="login.user.userName">

【讨论】：

它部分解决了我的问题。我现在可以调用提交。但是，它总是告诉我 userName 是未定义的。

就像错误告诉你的那样。您的 userName 变量尚未定义。如果您查看我的代码，我会将其更改为字符串文本。 :)

我明白这一点，但它说 - user.userName is undefined 这是我的函数参数。

你能更新你的完整代码吗？与您的代码相比，我更改的另一件事是，您尝试执行 ng-click = "login.submitForm(user)"。但我把它改成了 ng-click="login.submitLoginForm(login.user)"。为什么？因为我们只在控制器上定义了 submitLoginForm。并将对象用户作为参数传递，它需要再次指定控制器名称。就我而言，我使用别名“登录”

更新/编辑了我的代码。抱歉，我认为我也编辑了您的代码。请忽略它。