Rxjs Subscribe been called twice

Question

None of similar asked questions helped me, so here goes my problem I am using rxjs subscribe method, but it is been fired twice and i would like it to be called once. Here is 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',
})
export class LoginPage {
  private form: FormGroup;
  private usuario: string;
  private senha: string;
  public afoList: AfoListObservable<any[]>;  
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private statusBar: StatusBar,
              private formBuilder: FormBuilder,
              private afoDatabase: AngularFireOfflineDatabase
            ) {
                this.form = this.formBuilder.group({
                  usuario: ['', Validators.required],
                  senha: ['', Validators.required]
                });
  }

  ionViewDidLoad()
  {
    this.statusBar.hide(); 
  }

  entrar()
  {
    let usuario_senha = this.usuario + "_" + this.senha;
    this.afoDatabase.list('usuarios/', {query: {
      orderByChild: 'usuario_senha',
      equalTo: usuario_senha
    }}).take(1).subscribe((x) => {
      if(x.length == 1)
      {
        console.log("true");
      }
      else
      {
        console.log("false");
    }},
    error =>{
        console.error("Error in subscribe: ", error.message);
    },
    () =>{
      console.log("done");
      });
  }

  abrirCadastrarUsuario()
  {
    this.navCtrl.push(CadastrarUsuarioPage);
  }
}

and it prints “false”/“true” and “done” 2x each time it is called.

--UPDATE -- as ordered, the entire code, it is been called inside a button click

-- UPDATE -- The component from where it is been called from

<ion-content padding class="content">
    <ion-grid>
      <form [formGroup]="form" (ngSubmit)="entrar()">
        <ion-row style="height:50px;margin-top:30px" align-items-center>
          <ion-col col-12 text-center class="login-title">
            Login Offline
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <ion-list>
              <ion-item class="no-background border-top-transparent">
                <ion-label color="branco" floating>Usuário</ion-label>
                <ion-input type="text" [(ngModel)]="usuario" formControlName="usuario"></ion-input>
              </ion-item>
            </ion-list>
            <ion-list>
              <ion-item class="no-background border-top-transparent">
                <ion-label color="branco" floating>Senha</ion-label>
                <ion-input type="password" [(ngModel)]="senha" formControlName="senha"></ion-input>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <button type="submit" color="branco" style="height:50px" (click)="entrar()" ion-button block outline round>Entrar</button>
          </ion-col>
        </ion-row>
      </form>
    </ion-grid>
    <div class="cadastrar"><p class="cadastrar-texto" (click)="abrirCadastrarUsuario()">Cadastre-se</p></div>
</ion-content>

Answer 1

Your entrar() function is called twice because of ngSubmit here:

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

and button's type submit in here:

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

Basically on button's click event you are submitting the form which indirectly call the entrat() function from (ngSubmit) while on the other hand this function is also directly called from button's click (click)="entrar()"