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

Question

我有两种形式＆＃39;注册＆＃39;和＆＃39;登录＆＃39;在一个html页面中只使用angularJS中的一个控制器（类似于facebook登录页面的东西）。使用ng-submit事件对它们进行验证，限制一个被执行。所以在对它进行了一些研究之后，我在注册表单上使用了ng-submit事件，并在登录表单中使用了ng-click for login按钮。它可以在触发提交事件之前验证注册表单并显示错误。但是，如果用户在单击登录表单的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嵌入/包含的，并且使用与注册相同的MainCtrl控制器。我想一次使用一个表单。两个表单的单击事件都可以正常工作，并在登录或注册后将我重定向到所需的页面。但如果用户未在任何字段中输入所需数据，则无法显示登录表单的错误消息。我想知道是否可以在一个html页面中使用两个不同的ng-submit事件的两个表单？或者我使用ng-submit进行一次和ng-click for other的方式很好？如果是这样，为什么它不验证登录表单。期待以角度方式解决问题。请帮助或提供可以帮助我解决问题的指示。

Answer 1

您应该在<form>标记中包含两个表单。它们可以嵌套或分开，但需要在<form>标记中进行验证。