Ionic 4 Button does not trigger ngSubmit

[zlawson-ut]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : none

System:

   ios-deploy : 1.9.1
   ios-sim    : 5.0.13
   NodeJS     : v9.5.0 (/usr/local/Cellar/node/9.5.0/bin/node)
   npm        : 5.6.0
   OS         : OS X El Capitan
   Xcode      : Xcode 8.0 Build version 8A218a

Environment:

   ANDROID_HOME : not set

Describe the Bug
<ion-button type="submit"> does not trigger NgForm ngSubmit any longer after upgrading to ionic 4. The intended behavior is referenced in the previous version here: https://ionicframework.com/docs/developer-resources/forms/

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a form like <form (ngSubmit)="onSignup(form)" #form="ngForm"> containing <ion-button expand="full" type="submit">Sign up</ion-button>
2. Submit the form using the enter key
3. onSignup is not triggered.

Related Code
The previous behavior that should happen is referenced here: https://ionicframework.com/docs/developer-resources/forms/

Expected Behavior
ngSubmit event to be triggered on either submiting form by enter keypress or by clicking the submit button.

[manucorporat]

Can you update to beta.2 and try again?

[marcorinck]

I'm using beta.2 and submit buttons still do not trigger ngSubmit on the enclosing form.

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

The template I'm using (which worked in ionic3):

<form name="loginForm" (submit)="doLogin()">
	<div class="input-group round" [class.login-error]="loginError">
		<icon class="group-icon account" [svgIcon]="'account'"></icon>
		<ion-input #userref [(ngModel)]="username" name="username"
		           placeholder="Benutzername"></ion-input>
	</div>

	<div class="input-group round" style="margin-top: 15px;" [class.login-error]="loginError">
		<icon class="group-icon lock" [svgIcon]="'lock-outline'"></icon>
		<ion-input [(ngModel)]="password" type="password" name="password" class="password" placeholder="Passwort"></ion-input>
	</div>

	<ion-button color="blue-action" shape="round" expand="full" id="submit" type="submit"
	            (click)="doLogin()" style="margin-top: 15px;"
	            [disabled]="disableNavigation">Anmelden</ion-button>
</form>

[andrewshell]

I'm also seeing this issue.

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (/Users/andrewshell/.nvm/versions/node/v9.3.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

System:

   NodeJS : v9.3.0 (/Users/andrewshell/.nvm/versions/node/v9.3.0/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra

Here is my form:

<form (submit)="submit()">
    <ion-list lines="none">
        <ion-item>
            <ion-input type="text" name="title" [(ngModel)]="title" placeholder="Add Item"></ion-input>
            <ion-button type="submit" item-end fill="clear" >
                <ion-icon name="md-add"></ion-icon>
            </ion-button>
        </ion-item>
    </ion-list>
</form>

The submit method gets called if I click the submit button but not if I press return. I've been keeping my app at 4.0.0-alpha.7 because it works there. But it broke when I upgraded to 4.0.0-alpha.14. Not sure specifically where it broke between 7 and 14.

[zlawson-ut]

@manucorporat updated to the following with no change, unfortunately.

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : none

System:

   ios-deploy : 1.9.1
   ios-sim    : 5.0.13
   NodeJS     : v9.5.0 (/usr/local/Cellar/node/9.5.0/bin/node)
   npm        : 5.6.0
   OS         : OS X El Capitan
   Xcode      : Xcode 8.0 Build version 8A218a

Environment:

   ANDROID_HOME : not set

[btsiders]

@manucorporat Still broken with Beta 3.

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (C:\Users\Bryan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

[btsiders]

This is happening for me in Chrome (Version 68.0.3440.106 (Official Build) (64-bit)).

After noticing an issue with autocomplete="on" as well, I tried using Firefox. This works for me in Firefox, and autocomplete="on" works in Firefox as well. So I tried Edge, and it worked fine there. Seems Chrome is the odd man out this time.

[paulstelzer]

This is issue should be resolved in beta.17. If I am wrong, please write here!

[codybeebework]

I've updated to beta.17 and confirmed the problem still exists.

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\CBeebe\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Chrome:

   Version 71.0.3578.80 (Official Build) (64-bit)

Here's how you can reproduce it:

1. Generate a blank Ionic project.
2. Go to package.json, update the ionic/angular version to 4.0.0-beta.17, and run npm install (the generator gives you beta.16 right now).
3. In the home module, import ReactiveFormsModule.
4. Replace the content of home.page.html with the following:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="loginForm" (ngSubmit)="onClickLogIn(loginForm.value)">
    <ion-item>
      <ion-input type="text" name="username" placeholder="Enter username" formControlName="username"></ion-input>
    </ion-item>
    <ion-item>
      <ion-input type="password" name="password" placeholder="Enter password" formControlName="password"></ion-input>
    </ion-item>
    <ion-button type="submit">Sign In</ion-button>
  </form>
</ion-content>

5. Replace home.page.ts with the following:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: new FormControl('username'),
      password: new FormControl('password')
    });
  }

  onClickLogIn(credentials) {
    console.log('form submitted', credentials);
  }
}

6. Ionic serve it up. You will only see the console log the form values when you click the button, not when you hit enter within either of the two input fields.

This is my first comment on GitHub, so let me know if I missed anything you need. Thanks