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

[paulstelzer]

@codybeebework Thanks for your response and your time to add this :) But I think you missed something because it should work like you described. See my repo -> https://github.com/paulstelzer/test-ionic

UPDATE: AHHH - You said when you hit enter. That's something completely different. Ionic 4 uses shadow dom, so the native input element is not available.

You have to add such a feature yourself by adding (keyup.enter)="onClickLogIn(loginForm.value)". I added this to my repo, too

[codybeebework]

The title of this issue and OP's steps to reproduce (step 2) are not in agreement so no worries. We came to the same conclusion, using keyup.enter to mimic what a normal html form provides.

I've pulled your git repo and was able to confirm that the keyup events for enter were giving the desired effect, and reveals the same bug I ran into. This breaks what was already working in Microsoft Edge. Before adding the keyup events to the input fields, Edge was recognizing hitting enter as a form submission. After adding the events, Edge will fire the form submission twice: once for the normal html form submission and once again because of our manual event being fired.

I'm still new to what the Shadow DOM provides and restricts, but I was under the impression that it is related only to styling, not functionality. If that's not the case, how might Edge be ignoring it?

To add more to the work around, you can remove type="submit" from the submit button and replace it with the manual keyup.enter event the input fields have. Doing this makes the effect consistent across Chrome, Firefox, and Edge at the least (I have yet to test other browsers).

If it is not because of the Shadow DOM, then I hope this could be fixed in a future Ionic update.

Thanks for the quick response.

[paulstelzer]

Ah thanks for this good answer!

The reason for this: Edge is not using Shadow DOM, so there it's all plain. That's the reason why the normal input enter is working there. But the good news is that Edge (better EdgeHTML) will be removed in future :D They also will use Chromium. But all older browsers without shadow dom (e.g. Firefix <63) also affected.

I think we have to find a solution for it. One could be do add a variable to the function that will be set to true / false (isSubmitted). Not a good workaround, but a workaround. I will share it with the Ionic dev team if there is another (better) solution.

[paulstelzer]

I close this for now because it should fixed with #17043 . After rc.2 release you can check again and if it still not working, just create a comment here and I reopen.

I tested it already with the latest master and it works. You just have to keep in mind that it only works with one input to press enter (workaround here -> https://stackoverflow.com/questions/6317761/pressing-enter-submits-html-form-with-one-input-but-not-two), but that is all related to HTML / browser and not Ionic

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.