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>