Solving AngularJS ngSubmit Problems

Maybe this will save the rest of you some headaches in the future.

While working on my app, I could not get Angular's ng-submit to work in an Ionic Framework app.

I hate to admit I spent an hour trying to solve this problem. I forked Ionic's CodePen samples and they all worked. I did everything imaginable to try it outside of my own app. Nothing worked.

Original code:

<div class="card kit-card">

  <div class="item">

    <div class="list">

      <h2 class="dark">
        {{ "INVITATION_WHO_TO_INVITE" | translate }}
      </h2>

      <form name="nameInfoForm" novalidate="" ng-submit="nameInfo.submitName()">

        <label class="item item-input">
          <span class="input-label">{{ 'LABEL_GIVEN_NAME' | translate }}</span>
          <input type="text" autocomplete="off" autocorrect="off" placeholder="{{ 'PLACEHOLDER_FRIENDS_GIVEN_NAME' | translate }}" name="givenName" ng-model="nameInfo.givenName">
        </label>

        <label class="item item-input">
          <span class="input-label">{{ 'LABEL_FAMILY_NAME' | translate }}</span>
          <input type="text" autocomplete="off" autocorrect="off" placeholder="{{ 'PLACEHOLDER_FRIENDS_FAMILY_NAME' | translate }}" name="familyName" ng-model="nameInfo.familyName">
        </label>

      </form>

    </div>

    <button class="button button-block button-energized">Next</button>

  </div>


</div>

Finally, I stumbled across this answer on stackoverflow.

I'm so stupid. My submit button was outside the form. In order for ngSubmit to work, it needs a button INSIDE the form. D'oh!

Corrected Code :

<div class="card kit-card">

  <div class="item">

    <form name="nameInfoForm" novalidate="" ng-submit="nameInfo.submitName()">

      <div class="list">

        <h2 class="dark">
          {{ "INVITATION_WHO_TO_INVITE" | translate }}
        </h2>


        <label class="item item-input">
          <span class="input-label">{{ 'LABEL_GIVEN_NAME' | translate }}</span>
          <input type="text" autocomplete="off" autocorrect="off" placeholder="{{ 'PLACEHOLDER_FRIENDS_GIVEN_NAME' | translate }}" name="givenName" ng-model="nameInfo.givenName">
        </label>

        <label class="item item-input">
          <span class="input-label">{{ 'LABEL_FAMILY_NAME' | translate }}</span>
          <input type="text" autocomplete="off" autocorrect="off" placeholder="{{ 'PLACEHOLDER_FRIENDS_FAMILY_NAME' | translate }}" name="familyName" ng-model="nameInfo.familyName">
        </label>


      </div>

      <button class="button button-block button-energized" ng-click="nameInfo.submitName()">Next</button>


    </form>

  </div>

</div>