How to call one function in another function inside same controller in angular2

Question

I am working on login page. What I am trying to do is I have two function in a class validateLogin() and submit(). When clicking the login button my is successfully submitted and I am able to get the username and password.

I am trying to call my validateLogin function in my submit function but I am not able call it my sublime text shows an error on the validateLogin and I am not getting any error in my chrome Browser.

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FormBuilder,Validators} from "@angular/common";

@Component({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {

    public loginForm: any;
  public commentOnTimeOut: any;

  constructor(private navCtrl: NavController, public form:FormBuilder) {
    this.loginForm = this.form.group({
        "email":["",Validators.required],
        "password":["",Validators.required]
    })
  }

  validateLogin(cb){
    window.setTimeout( () => {
        if (this.loginForm.value.email == 'admin' && this.loginForm.value.password == 'admin123') {
          console.log("invoking If part");
          cb('valid User');
        }
        else {
          console.log("invoking elsePart");
          cb('Invalid User');
        }
    }, 3000);
  }

  submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
      console.log(response);
      this.commentOnTimeOut = response;
    })

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
  }  

}

How can i call my function validateLogin in my submit function ?

Here is an demo plunker where it works good

Error:

GET http://localhost:8100/build/js/app.bundle.js in my console.

In my serve i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2663: Cannot find name 'validateLogin'. Did you mean the instance member 'this.validateLogin'?

the above error i am invoking any help

sebaferreras · Accepted Answer · 2016-08-04 10:06:42Z

Since you're working with an instance of a class, if you want to refer to a property or method inside that instance, you have to add the this. before the property or method name.

In my serve i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2663: Cannot find name 'validateLogin'. Did you mean the instance member 'this.validateLogin'?

That's because if don't add the this to the validateLogin method, a global method with that name will be looked for, and because it's not there, an error is thrown. So your submitmethod should be:

submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    this.validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
      console.log(response);
      this.commentOnTimeOut = response;
    })

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
  }

UPDATE:

yes i try that this. and i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2346: Supplied parameters do not match any signature of call target.

That's because your validateLogin method expect just a single parameter (the cb parameter) and you're sending three parameters (email, password and the callback).

Try by modifying that line like this:

 // New method to handle the response
 processLoginResult(response) {
    console.log(response);
    this.commentOnTimeOut = response;
 }

 submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    // Instead of calling it with email, password and the callback
    // just send the added method as a callback 
    this.validateLogin(this.processLoginResult);

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
}

yes i try that this. and i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2346: Supplied parameters do not match any signature of call target.

Ankit Singh · Accepted Answer · 2016-08-04 07:55:44Z

3

To access class members you need to use this. before any class member , in your case try this

this.validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
   console.log(response);
   this.commentOnTimeOut = response;
})

edited Aug 4, 2016 at 7:55

answered Aug 4, 2016 at 7:49

Ankit Singh

25k12 gold badges69 silver badges90 bronze badges

4 Comments

Ankit Singh Over a year ago

in your plunker demo you are using javascript whereas in your question you're using typescript, they are different languages

Mohan Gopi Over a year ago

yes I am trying to get some thing like that javaScript plunker. i try using this.validateLogin but it is still error.

Ankit Singh Over a year ago

what is the error , please update your question with more information if possible

Mohan Gopi Over a year ago

I have updated my question please take a look on error part

Collectives™ on Stack Overflow

How to call one function in another function inside same controller in angular2

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related