title: How can I watch for an ng-submit event or enter keypress on sub forms in angular.js?
body: <p>I have a multi-step form with 5 steps. I'd like the user to be able to use the enter key to submit each of the sub forms to trigger validation and moving to the next sub form on success. I can't find a way to do this. I was thinking perhaps I could add <code>ng-keydown</code> events to each of the sub forms (or a custom directive binding to <code>onkeydown</code>) and watch for the enter key <code>keyCode</code>. </p>
  
  <p><strong>Does anybody have experience with getting this to work in Angular? How would you add this functionality?</strong></p>
  
  <p>Here's a brief HTML sample of the sub-forms. Assume the "Next Step" button is triggering <code>$scope.nextStep()</code> within an angular controller and that subsequently performs validation to determine if the user can move to the next step or if a validation error is displayed.</p>
  
  <pre><code>&lt;form&gt;
      &lt;div ng-form="step1"&gt;&lt;/div&gt;
      &lt;div ng-form="step2"&gt;&lt;/div&gt;
      &lt;div ng-form="step3"&gt;&lt;/div&gt;
      &lt;div ng-form="step4"&gt;&lt;/div&gt;
      &lt;div ng-form="step5"&gt;&lt;/div&gt;
  
      &lt;button type="button" class="btn" ng-click="nextStep()"&gt;Next Step&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>For those of you reading and looking for more info on the answer</strong></p>
  
  <p>I track the form step inside of my controller's <code>$scope.current_step</code>. Using that, I'm able to use <code>$scope[$scope.current_step]</code> to reference the current form. With @Vova's accepted answer below, I would do something similar to the following:</p>
  
  <pre><code>$scope.myFunc = function(event) {
      if (!$scope.isFormValid()) {
          return false;
      } 
  
      // trigger next step (which handles it's own validation)
      $scope.nextStep();
  };
  
  $scope.isFormValid = function() {
      // check if the current form is invalid
      if ($scope[$scope.current_step].$pristine
          || $scope[$scope.current_step].$invalid
      ) {
          return false;
      }
  
      return true;
  };
  </code></pre>