v4: Unexpected reactive form submit behavior

Bug Report

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.11 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.9
   @angular-devkit/core       : 0.7.0-rc.1
   @angular-devkit/schematics : 0.7.0-rc.1
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.10
   @ionic/schematics-angular  : 1.0.0-rc.10

System:

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

Describe the Bug Unclear if these are Angular or Ionic issues. Works in Ionic 3.

1. Enter key does not submit Angular reactive form.
2. Pre-filled Angular reactive form is invalid when submitted (even though form fields valid).

Steps to Reproduce Steps to reproduce the behavior:

1. Create a test page with a simple Angular reactive form. Code below.
2. Click enter on keyboard. Form is not submitted.
3. Click submit button.
4. console logs “Form is invalid”

Related Code

test.page.html

<ion-header>
    <ion-toolbar>
        <ion-title>test</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content padding>
    <form [formGroup]="form" #ngForm="ngForm">
        <ion-item>
            <ion-label position="floating">Email</ion-label>
            <ion-input value="[e-mail]" formControlName="email" type="email"></ion-input>
        </ion-item>
        <ion-item *ngIf="form.controls.email.invalid && (form.controls.email.dirty || form.controls.email.touched || ngForm.submitted)" class="validation-message">
            <p>Enter a valid email.</p>
        </ion-item>
        <ion-button type="submit" (click)="submit($event)">Submit</ion-button>
    </form>
</ion-content>

test.page.ts

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

@Component({
    selector: 'test',
    templateUrl: './test.page.html',
    styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {

    private form: FormGroup;

    constructor(
        public formBuilder: FormBuilder
    ) { }

    ngOnInit() {
        this.form = this.formBuilder.group({
            email: ['', Validators.compose([Validators.email, Validators.required])],
        });
    }

    private submit(event) {
        if (this.form.valid) {
            console.log('Form is valid.')
        } else {
            console.log('Form is invalid.')
        }
    }
}

test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TestPage } from './test.page';

const routes: Routes = [
    {
        path: '',
        component: TestPage
    }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes),
        ReactiveFormsModule
    ],
    declarations: [TestPage]
})
export class TestPageModule { }

Expected Behavior

1. Enter key submits form.
2. Pre-filled form with valid values results in this.form.valid = true

[matthew-valenti]

I’ve upgraded to the latest Ionic 4 release and created an example app with one test page and one simple angular reactive form: https://github.com/Cymetrik/ionic4-form.

There’s now an additional issue where clicking the submit button refreshes the whole page.

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.11 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.11
   @angular-devkit/core       : 0.7.0-rc.2
   @angular-devkit/schematics : 0.7.0-rc.2
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.11
   @ionic/schematics-angular  : 1.0.0-rc.11

System:

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

[devner007]

@matthew-valenti If it helps, here’s a workaround to submit the form, till the main issue of page reload is fixed:

<form [formGroup]="form">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input formControlName="email" type="email"></ion-input>
    </ion-item>
    <ion-item *ngIf="form.controls['email'].invalid &&
                    (form.controls['email'].dirty ||
                      form.controls['email'].touched )" class="validation-message">
      <p>Enter a valid email.</p>
    </ion-item>
    <div class="button-container">
      <ion-button type="button" (click)="submit(form.value)">Submit</ion-button>
    </div>
  </form>

Here is the modified submit method in TS:

submit(formObject) {
        console.warn(formObject);
        if (this.form.valid) {
            console.log('Form is valid.');
        } else {
            console.log('Form is invalid.');
        }
    }