Ng-submit form not working when ion-select is present

Ionic Framework ionic-v3
1

When including an ion-select inside of a form it won’t submit by pressing enter. If I comment out the ion-item that contains the ion-select. Then the form will respond with the enter key.

Here is the html:

<ion-header>
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form ng-submit="testClick()">
  <ion-item>
      <ion-label>New Status</ion-label>
      <ion-select [(ngModel)]="statusSelection" name="statusOptions">
        <ion-option >test1</ion-option>
        <ion-option >test2</ion-option>
      </ion-select>
    </ion-item>

  
    <ion-item>
      <ion-label>Memo</ion-label>
      <ion-input [(ngModel)]="person" name="person"></ion-input>
    </ion-item>

  <button ion-button type="submit" style="float: right;" (click)="testClick()">Click</button>
</form>

</ion-content>

and the ts:

import { Component } from '@angular/core';

import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';


@Component({
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  statusOptions: string[] = ['test1','test2'];
  statusSelection: string = 'test1';

  constructor(public modalCtrl: ModalController) {  }


  testClick(){
    console.log('Cicked');
  }
}

Does anyone have a suggestion?

2

It looks like this was supposed to have been fixed several months ago.

3

Thanks rapropos,
That is similar but his enter triggered as error, where in this case simply nothing happens and I don’t see any errors in the console.

Ionic info in case that’s asked for:
ordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.4.0
Xcode version: Not installed

4

What happens if you change “ng-submit” to “(ngSubmit)”?

6

Interestingly, this causes the “testClick()” function to be called twice. However, still no trigger when pressing the enter key.

7

Actually that did work, still waking up this morning and forgot to have the cursor in the text input before pressing enter.

However, I had to remove the “(Click)” from the button, as pressing that would submit the click on the button, and the form submission for the form. This resulted in the method being called twice. FYI for anyone else referencing this.

Thanks for the help rapropos!

Here is the updated html:

<ion-header>
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form (ngSubmit)="testClick()">

  <ion-item>
      <ion-label>New Status</ion-label>
      <ion-select [(ngModel)]="statusSelection" name="statusOptions">
        <ion-option >test1</ion-option>
        <ion-option >test2</ion-option>
      </ion-select>
    </ion-item>

  
    <ion-item>
      <ion-label>Memo</ion-label>
      <ion-input [(ngModel)]="person" name="person"></ion-input>
    </ion-item>

    <button ion-button type="submit" style="float: right;">Click</button>

</form>

</ion-content>
8

Try to do it with:

   <form [formGroup]="example" (ngSubmit)="exampleSubmit()">

 <ion-item>
      <ion-label>New Status</ion-label>
      <ion-select formControlName="statusSelection" name="statusOptions">
        <ion-option >test1</ion-option>
        <ion-option >test2</ion-option>
      </ion-select>
    </ion-item>
 <button ion-button type="submit" [disabled]="!account.valid">Submit</button>
  </form>