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

Question

我在一个 html 页面中有两种表单“注册”和“登录”，仅使用 angularJS 中的一个控制器（类似于 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>

控制器是 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
      }

    };
  }
]);

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

Answer 1

<form> 标记中应该有这两种形式。它们可以嵌套或分离，但需要在<form> 标签中进行验证。