Ionic-framework: v4: Unexpected reactive form submit behavior

[matthew-valenti]

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="[email protected]" 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
I just tested your latest code and I do confirm that I am seeing the same behavior as you are. It reloads the whole page! I did not debug this yet, but tried to recreate the same issue in a brand new project. I am shocked to find out that in the new project, I can't even work with the Reactive forms, even though I have imported FormsModule & ReactiveFormsModule in the app.module.ts file. Following are some screenshots of the issue:

Any help in solving the issue is greatly appreciated.

[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.');
        }
    }

[declanelcocks]

Can confirm this issue is there also. This issue blocks me from updating to v4 really since, without functioning forms, most existing apps are going to be a pain to migrate over.

[ionitron-bot[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.