Click calling function twice angular

Question

I have created a generic button component in my application that would execute a particular function from the parent component it is imported into. In this specific example I have a login form which will call a login() function upon clicking of that button.

The problem I seem to be having is that every time I click the login button it executes the method twice instead of once. I am not sure why this is happening. There is a forgot password button right next to it which has also been derived from the same template but should have different functionality since I have bound a different function to the click directive but when I click that link it runs the login() function again but this time once.

Here is a screenshot of my login form to get an idea of the layout:

Here is my code:

button.component.ts

import { Component, ViewEncapsulation, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ButtonComponent implements OnInit{

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Output() callFunction = new EventEmitter();

  constructor(){ }

  ngOnInit(){
    this.group = new FormGroup({});
  }

  onClick(event){
    this.callFunction.emit(event);
  }

}

button.component.html

login.component.ts

import { Component, OnInit, ViewChild, ViewContainerRef, AfterContentInit, ComponentFactoryResolver } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { OauthService } from 'src/app/services/oauth/oauth.service';
import { LoggerService } from 'src/app/services/logger/logger.service';
import { ToastrService } from 'ngx-toastr';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { TextFieldComponent } from 'src/app/components/core/text-field/text-field.component';
import { ButtonComponent } from 'src/app/components/core/button/button.component';

/**
* This component is rendered at the start of application, it provides the UI
* & functionality for the login page.
*/
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

/**
* This class is used to build a login form along with initialization of validators
* as well as authenticate the user, and reroute upon success
*/
export class LoginComponent implements OnInit, AfterContentInit{

  @ViewChild('username', { read: ViewContainerRef }) username;
  @ViewChild('password', { read: ViewContainerRef }) password;



  /**
  * This property initializes the formGroup element.
  */
  userForm: FormGroup;
  /**
  * The constructor initializes Router, FormBuilder, OauthService, LoggerService, ToastrService
  * & TranslatePipe in the component.
  */
  constructor(private router: Router,
    private fb: FormBuilder,
    private oauth: OauthService,
    private logger: LoggerService,
    private toastr: ToastrService,
    private translate: TranslatePipe,
    private resolver: ComponentFactoryResolver) { }
  /**
  * This is the hook called on the initialization of the component, it initializes
  * the form.
  */
  ngOnInit() {
    this.buildForm();
  }



  /**
   * This method initialized the the formGroup element. Its properties and the validators.
   *
   * @method buildForm
   * @return
   */
  buildForm() {
    this.userForm = this.fb.group({
      'username': ['', Validators.required],
      'password': ['', Validators.required],
    });
  }
  /**
   * This method returns the values of the form controls.
   *
   * @return
   */
  get form() { return this.userForm.controls; }
  /**
   * This method is triggered on success, it reroutes the user to main page.
   *
   * @return
   */
  onSuccess() {
    let result = this.translate.transform("pages[login_page][responses][success]");
    this.logger.info(result);
    this.toastr.success(result);
    this.router.navigate(['main']);
  }
  /**
   * This method is triggered when user clicks log-in, it calls the aunthenication method
   * from oauth service.
   *
   * @return
   */
  login() { console.log("i am called00");
    this.oauth.authenticateUser(this.form.username.value, this.form.password.value, this.onSuccess.bind(this));
  }

  ngAfterContentInit() {
    this.buildUserField();
    this.buildPasswordField();
  }




  /**
  * This function builds the username field, imports the TextFieldComponent
  *
  */
  buildUserField(){
    let data = {
      type: "text",
      class: "form-control",
      placeholder: this.translate.transform("pages[login_page][login_form][placeholders][username]"),
      id: "username",
      autoComplete: "username",
      formControlName: "username",
      group: this.userForm
      }
    const inputFactory = this.resolver.resolveComponentFactory(TextFieldComponent);
    const usernameField = this.username.createComponent(inputFactory);
    usernameField.instance.group = data.group;
    usernameField.instance.type = data.type;
    usernameField.instance.class = data.class;
    usernameField.instance.placeholder = data.placeholder;
    usernameField.instance.id = data.id;
    usernameField.instance.autoComplete = data.autoComplete;
    usernameField.instance.formControlName = data.formControlName;
  }

  /**
  * This function builds the password field, imports the TextFieldComponent
  *
  */
  buildPasswordField(){
    let data = {
      type: "password",
      class: "form-control",
      placeholder: this.translate.transform("pages[login_page][login_form][placeholders][password]"),
      id: "password",
      autoComplete: "password",
      formControlName: "password",
      group: this.userForm
      }
    const inputFactory = this.resolver.resolveComponentFactory(TextFieldComponent);
    const passwordField = this.password.createComponent(inputFactory);
    passwordField.instance.group = data.group;
    passwordField.instance.type = data.type;
    passwordField.instance.class = data.class;
    passwordField.instance.placeholder = data.placeholder;
    passwordField.instance.id = data.id;
    passwordField.instance.autoComplete = data.autoComplete;
    passwordField.instance.formControlName = data.formControlName;
  }


  /**
  * This function builds the login button functionality, imports the ButtonComponent
  *
  */
  buildLoginButton(){
    this.login();
  }


  /**
  * This function builds the forgot password link functionality, imports the ButtonComponent
  *
  */
  buildForgotPasswordButton(){
  }

  /**
  * This function builds the sign up button functionality, imports the ButtonComponent
  *
  */
  buildSignUpButton(){
  }



}

login.component.html


  
    
      
        
          
            
              
                
                  {{ 'pages[login_page][login_form][labels][login]' | translate }}
                  {{ 'pages[login_page][login_form][labels][sign_in]' | translate }}
                  
                    
                      
                    
                     
                  
                  
                    
                      
                    
                     
                  
                  
                    
                    
                    
                    
                    
                      
                    
                    
                  
                
              
            
            
              
                
                  {{ 'pages[login_page][sign_up_panel][labels][sign_up]' | translate }}
                  {{ 'pages[login_page][sign_up_panel][labels][new_account]' | translate }}

SIDE NOTE: (Although this is not technically part of the question title) I am using CoreUI for styling the form, which is imported into my global styling file and worked fine when I was not using reusable components for text fields and buttons, but now when I have started using those the child components somehow are not inheriting the CoreUI styles, just plain bootstrap, if someone could pretty please help me with that I would really appreciate it :)

John Velasquez · Accepted Answer

in your form you have a submit callback for login()

Click calling function twice angular

Answers (2)

Related Questions