Ionic 2: form inside of ion-footer won't submit on iOS


#1

Hey everyone, I have a few instances where I have a form inside of an <ion-footer> tag in various pages of my app, in which I’m submitting a message. When I use ionic serve, it works fine, however when I build it and test it out via my iPhone 6s plus, when I hit the submit button, it does nothing and never submits the form.

Here is the HTML of my code:

<!-- Send a message -->
<ion-footer>
  <div class="create-message-block">
    <form [formGroup]="addMessageForm" novalidate (ngSubmit)="addMessage(addMessageForm.value, addMessageForm.valid)">
      <textarea [formControl]="addMessageForm.get('message')" placeholder="Write your message..."></textarea>
      <input type="submit" value="Send"/>
    </form>
  </div>
</ion-footer>

Here is my component file:

// Function to create the comment form
  createAddMessageForm() {
    this.addMessageForm = this._fb.group({
      message: ['', [<any>Validators.required]],
    });
  }

constructor(
    private _fb: FormBuilder
  ) {

    // Create the comment form
    this.createAddMessageForm();
}

I’ve tried placing the form outside of the <ion-footer> with no success. I’ve also removed the validators from the field to see if there was an issue there and it didn’t help. Anyone else encountered this?