The RxJS subscribe function was invoked twice

Having trouble with the rxjs subscribe method firing twice? Here's my code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CadastrarUsuarioPage } from '../cadastrar-usuario/cadastrar-usuario';
import { FirebaseProvider} from '../../providers/firebase/firebase';
import { AngularFireOfflineDatabase, AfoListObservable, AfoObjectObservable } from 'angularfire2-offline/database';
import { HomePage } from '../home/home';
@Component({  
  selector: 'page-login',
  templateUrl: 'login.html',
})
... (Code continues) ...

The issue is causing "false"/"true" and "done" to be printed twice each time it is called.

--UPDATE -- The entire code snippet is being executed inside a button click event.

-- UPDATE -- This code is part of a component being called from somewhere else in the application.

<ion-content padding class="content">
    <ion-grid>
      ... (Component HTML markup continues) ...
</ion-content>

Answer №1

The entrar() function is being invoked twice due to the presence of ngSubmit in the form and the submit type button.

<form [formGroup]="form" (ngSubmit)="entrar()">

and the submit type button here:

<button type="submit" color="branco" style="height:50px" (click)="entrar()" ion-button block outline round>Entrar</button>

Essentially, when the button is clicked, it triggers both the form submission indirectly through (ngSubmit), as well as directly through the (click)="entrar()" event binding.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sharing a function between a Parent and Child component in Angular 2

An Array named mMemberCount is present in the Parent Component. Depending on the size of this array, a child component (which is Reusable) gets attached to the Parent component. <member-template *ngFor="let item of mMemberCount" [title]="item.relation" ...

Having difficulties viewing the sidemenu icon on Ionic 3, despite enabling the menu through MenuController

I am trying to show the sidemenu icon on my Home page, which users can access from the Add-Contract page. Even though I have enabled the sidemenu in home.ts using this.menu.enable(true);, the icon is not visible. However, I can still swipe and access the ...

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

Issue with demonstrating the Material Angular expansion-panel feature

Exploring the world of Material Angular has been an exciting journey. Recently, I've been experimenting with adding components to my project. Currently, I'm focused on incorporating the expansion-panel component example into a dialog. However, de ...

Tips for managing multiple projects in Angular 7 simultaneously

Our team is currently working on an application with two separate workspaces. One workspace serves as the main project while the other is exported as a module to our private npm repository. To access this module, we retrieve it through our package.json f ...

Building a search feature with a customized pipe in Angular

I attempted to create my own custom pipe in Angular 6 for filtering a list of campaigns using a search box. Strangely, I am having trouble getting the filter to work on the campaign list. Below is the code snippet that I have written. This is the implemen ...

Using {angular} import from 'angular' is causing a malfunction in AngularJS version 1.5

React - 17.0 TypeScript - 4.1.2 Babel - 7.13.14 tsconfig.json { "compilerOptions": { "target": "es6", "module": "esnext", "moduleResolution": "node", "jsx": ...

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

Alternative option for const enums in Typescript

In the ever-evolving world of Typescript transpilers, there is a noticeable shift towards per-module transpilation to boost build speed. However, this approach comes at a cost - it impedes cross-module const enum usage as type information is required for t ...

Ways to retrieve the value of a variable beyond its scope while using snapshot.foreach

I am experiencing an issue where the return statement returns a null value outside the foreach loop of the variable. I understand that the foreach loop creates its own scope, but I need to figure out how to return the value properly... this.selectedUserMe ...

Experiencing difficulties with PrimeNg installation on Angular 12.1.4 due to an npm error

I'm facing an issue while trying to integrate PrimeNG into my project. I encountered a strange error and I'm unsure about how to resolve it. Can anyone offer some assistance? The Angular version currently installed on my machine is 12.1.4. 205-18 ...

Encountered issue in Angular: Object prototype must be either an Object or null, not undefined

I encountered an issue with my Angular application when trying to install npm dependencies using npm i. I kept receiving a "sha1 seems to be corrupted" error. To resolve this, I deleted the package-lock.json file and was able to successfully install all th ...

Sign up for notifications about updates to a variable within an Angular service

Is there a way to track changes in the value of a variable within an Angular service? I've been searching for a solution, but haven't been able to find one yet. In my layout's header component, I have a counter that displays the number of ...

"Encountering issues when trying to retrieve a global variable in TypeScript

Currently facing an issue with my code. I declared the markers variable inside a class to make it global and accessible throughout the class. However, I am able to access markers inside initMap but encountering difficulties accessing it within the function ...

How can I make sure the page scrolls to the top when navigating from one component to another in Angular 4 (now 5)?

Recently, I've encountered a problem with routing in my Angular 5 project. My CLI version is 1.5.2. The issue arises when transitioning from one route to another. If I scroll down on the page and then navigate back to the previous route, the page rem ...

A guide on distinguishing between two dates in Ionic3 using either date-fns or Moment libraries

How can I calculate the difference between two dates to determine the end of an employee's service? Similar Question: What is the best way to find the day difference between two dates using Ionic 3? I am looking for a solution on how to get the exac ...

How can I leverage a public API in Angular 6 to create a custom database for my application?

Currently, I am developing an Angular 6 project and I have a query regarding the possibility of obtaining data from both a public API and an in-memory database simultaneously. For example, displaying movies from a public API while also allowing users to ad ...

Exploring the dynamic duo of SystemJS and AngularJS 2

I am currently working on integrating the Core Angular2 module into my application, which is written in Typescript. It's essentially following the same structure as the quick start tutorial on the Angular.IO website. However, I am facing a challenge ...

Is it feasible to create type-safe callbacks in the style of Node.js?

Node callbacks typically have a structure like this: interface NodeCallback<TResult,TError> { (err: TError): void; (err: null, res: TResult): void; } With the callback receiving either an err or res, but not both. Many type definitions I'v ...

When trying to access an array within a nested reactive form group, a linting error was encountered

I'm currently working on a method to delete rows from a dynamic form, but I am struggling to target the array. The structure of my form group is as follows: this.piForm = this.fb.group({ milestoneSaveModel: this.fb.group({ milestonesToCr ...