Using right-button in the ion-header-bar to submit a form

ionic-v1
1

Hello,

I am looking for a way to put the submit button of a form inside the header. I saw there was another similar topic in this form which made the button to just call the function which submit the form. But the problem is that the button does not check if the required input field of the form is blank.

So there a way to make the button in header behave the same as the submit button of a form?

Thanks,
Brian

1 Like
2

AngularJS takes the very first button defined in the form and assumes that is the submit button. I don’t know of any way to override that.

3

Thanks, maybe I’ll need to look for some other ways to validate the input field.

4

I just found an ugly way taking hint from Calendee’s post above that first button is taken as submit button.
@kurokocon – I had the same trouble with validation and this way it work with validation code too.
I wrapped the whole code in form element and place the right header button as submit button and it works. Like so…

<ion-view title="Title">
    <form>
     <ion-header-bar>
    </ion-header-bar>
    <ion-content>
    </ion-content>
   </form>
</ion-view>
1 Like
5

You can set an id to the form and reference it by the form attribute of the button:

<ion-view title="Title">
  <ion-nav-buttons side="right">
        <button   type="submit" form="myForm">
 </ion-nav-buttons>
   <ion-header-bar>
   </ion-header-bar>
   <ion-content>
      <form id="myForm">
               <input name="myFormInput">
      </form>
   </ion-content>
</ion-view>
8 Likes
6

@vintner that’s awesome I had no idea this was so easy. Is there a way to do this dynamically? I have two forms both in tab content. Right now after seeing this I just added two buttons on the right, and then show/hide them based on the currently selected tab index. Was thinking of something like form="ctrl.getActiveForm()" using the tab delegate, but not sure what to pass as it won’t work with a string.

I can’t even find where this is documented.

Either way cheers for the post.