bug: Reactive Form Refreshing on Submit

[nlanson]

Bug Report

Ionic version: 5.5.0

Current behavior: When submitting a reactive form, the site refreshes and inputted form data and variables containing form data are null.

Expected behavior: When submitted, the app should not refresh and instead store the submitted inputs into the corresponding variables and continue on.

Steps to reproduce: settings.component.ts:

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

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss'],
})
export class SettingsComponent implements OnInit {

  accountForm: FormGroup;
  email: string;
  password: string;

  constructor(
    private fb: FormBuilder,
    private modalController: ModalController,
  ) { }

  ngOnInit() {
    this.accountForm = this.fb.group(
      {
        inputUsername: [null],
        inputPassword: [null]
      }
    );
  }

  submit() {
    console.log("Set account");
    this.email = this.accountForm.value.inputUsername;
    this.password = this.accountForm.value.inputPassword;
    this.modalController.dismiss();

    //add email and pass to native storage to store and pass onto login component
  }

}

Related code: settings.component.html:

<ion-header [translucent]="true">
  <ion-toolbar>
    <h1 class="settingsHeading">Account Settings</h1>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="LoginForm" (ngSubmit)="submit()">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input formControlName="inputUsername" type="email" id="inputUsername"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input formControlName="inputPassword" type="password" id="inputPassword"></ion-input>
    </ion-item>
    <ion-button type="submit" color="primary" class="ion-margin" expand="block">Set Login Details</ion-button>
  </form>
</ion-content>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule } from '@angular/forms';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFireDatabaseModule, AngularFireList } from '@angular/fire/database';
import { FirebaseService } from './services/firebase.service';
import { AuthService } from './services/auth.service';

import { SettingsComponent } from './login/settings/settings.component'; 

var firebaseConfig = {
  [redacted]
};

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    ReactiveFormsModule
  ],
  providers: [
    StatusBar,
    FirebaseService,
    SplashScreen,
    AuthService,
    SettingsComponent,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.2 (C:\Users\Nlanson\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.0
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, browser
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.2.2

System:

   NodeJS : v14.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[nlanson]

Hi, I will attach stackblitz or repo in the morning. thanks

On Fri, 20 Nov 2020 at 1:47 am, ionitron-bot[bot] notifications@github.com wrote:

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-framework/issues/22530#issuecomment-730423507, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGL7VEJVYYQHO3DGANUJ4TSQUVY3ANCNFSM4T3N3ACA .

[nlanson]

The reactive form wasn’t working because it was in a component instead of a page.

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