Submitting a form using a header button

ionic-v1
1

Hi all,

I’m trying to submit a form using the right button in the header (as it’s often the case in iOS7) but I’m stuck…

Here’s my form:

<form ng-submit="createContact(contact)">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Name</span>
      <input type="text" ng-model="contact.name">
    </label>
  </div>
</form>

And my controller:

$scope.rightButtons = [
    {
        type: 'button-clear',
        content: 'Save',
        tap: function () {
          // I'd like to “submit” my form here
          // i.e. trigger the $scope.createContact
          // function
        }
    }
];

$scope.createContact = function (contact) {
    console.log(contact.name);
};

Does anyone have an idea how I could access the form from within the controller, trigger its submit event and the createContact() function (along with the contact model parameter).

Many thanks in advance! Best regards,

David

2

May I ask why are you passing in the contact to the method?

Could you use a temporary object you bind to, such as $scope.newContact and then call $scope.createContact() which uses $scope.newContact? e.g.

$scope.createContact = function () {
  Contact.save($scope.newContact, function () {
    // contact created, clear form
    $scope.newContact = {};
  });
};
2 Likes
3

So obvious! :wink: Thank you very much for your help @gregorypratt…
Best regards,

David

4

Thanks for sharing, @gregorypratt!

P.S. We quoted a tweet of yours in our latest blog, hope that’s okay! :smile: http://ionicframework.com/blog/rise-above-the-platform/

5

Newest way to do this appears to be outlined here.