javascript - 两个 ng-submit 事件用于在一个 html 页面中的两个表单上进行验证

Question

我在一个html页面中有两种形式“注册”和“登录”，仅使用AngularJS中的一个 Controller (类似于facebook登录页面)。使用 ng-submit 事件对两者进行验证，限制其中之一的执行。因此，在对其进行了一些研究之后，我在注册表单上使用了 ng-submit 事件，并在登录表单中使用了 ng-click 登录按钮。它能够在提交事件触发之前验证注册表单并显示错误。但是，如果用户在单击登录表单的 login() 按钮之前忘记在任何字段中输入数据，则无法显示任何错误消息。这是该代码的模板: HTML:Signup.html

<div ng-app="myApp" ng-controller="MainCtrl">
<!--LoginForm-->
  <div role="form" name="loginForm" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : (submitted && loginForm.inputEmail.$invalid) || loginForm.inputEmail.$invalid && !loginForm.inputEmail.$pristine}">
       <label for="inputEmail">Email</label>
       <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email" required ng-model="username">
       <p ng-show="(submitted && loginForm.inputEmail.$invalid) || loginForm.inputEmail.$invalid && !loginForm.inputEmail.$pristine" class="help-block">Email is required</p>
     </div>

     <div class="form-group" ng-class="{ 'has-error' : (submitted && loginForm.inputPassword.$invalid) || loginForm.inputPassword.$invalid && !loginForm.inputPassword.$pristine}">
       <label for="inputPassword">Password</label>
       <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password" required ng-model="password">
       <p ng-show="(submitted && loginForm.inputPassword.$invalid) || loginForm.inputPassword.$invalid && !loginForm.inputPassword.$pristine" class="help-block">Password is required</p>
     </div>

     <div class="form-group">
       <button type="submit" class="btn" ng-click="login(loginForm.$valid)">Login</button>
     </div>
  </div>

<!--Signupform-->         
  <form name="signupForm" role="form" ng-submit="signupSubmit(signupForm.$valid)" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : (submitted && signupForm.firstname.$invalid) || signupForm.firstname.$invalid && !signupForm.firstname.$pristine}">
       <label for="firstname">First Name</label>
       <input type="text" name="firstname" class="form-control" id="firstname" ng-model="firstname" placeholder="" required="">
       <p ng-show="(submitted && signupForm.firstname.$invalid) || signupForm.firstname.$invalid && !signupForm.firstname.$pristine" class="help-block">Firstname is required.</p>
     </div>

     <div class="form-group" ng-class="{ 'has-error' : (submitted && signupForm.email.$invalid) || signupForm.email.$invalid && !signupForm.email.$pristine}">
       <label for="email">Email</label>
       <input type="email" name="email" class="form-control" id="email" ng-model="username" placeholder="" required="">
       <p ng-show="(submitted && signupForm.email.$invalid) || signupForm.email.$invalid && !signupForm.email.$pristine" class="help-block">Enter a valid email.</p>
     </div>
     <div class="form-group" ng-class="{ 'has-error' : (submitted && signupForm.password.$invalid) || signupForm.password.$invalid && !signupForm.password.$pristine}">
       <label for="password">Password</label>
       <input type="password" id="password" name="password" ng-model="password" required="">
       <p ng-show="(submitted && signupForm.password.$invalid) || signupForm.password.$invalid && !signupForm.password.$pristine" class="help-block">Password is required</p>
     </div>

    <button type="submit" class="btn">Sign Up</button>
  </form>
</div>

其 Controller 是MainCtrl:

angular.module('myApp')
 .controller('MainCtrl', ['$scope',function ($scope) {
    $scope.signupSubmit = function(isValid){
      if (isValid) {
        //signup user code

       }
      }

    $scope.login = function(isValid){
      if(isValid) {
        //login user by checking user creds
      }

    };
  }
]);

登录 View 实际上是使用signup.html中的ng-include嵌入/包含的，并使用与signup相同的MainCtrl Controller 。我想一次使用一种表单。这两种表单的点击事件都工作正常，并在登录或注册后将我重定向到所需的页面。但是，如果用户未在任何字段中输入所需数据，则无法显示登录表单的错误消息。我想知道是否可以在一个 html 页面中使用两种表单和两个不同的 ng-submit 事件？或者我对其中一个使用 ng-submit 而对另一个使用 ng-click 的方式可以吗？如果是这样，为什么它不验证登录表单。寻找解决问题的 Angular 方法。请帮助或提供可以帮助我解决问题的指示。

Answer 1

您应该在<form>中拥有这两种形式。标签。它们可以嵌套或单独，但它们需要位于 <form> 中待验证的标签。