bug: Reactive Form Refreshing on Submit

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

Author: Fantashit

1 thought on “bug: Reactive Form Refreshing on Submit

Comments are closed.