Upon executing a console.log on the class, it comes back as null

Question

Upon executing a console.log on the class, it comes back as null

Creating a class named UserData to retrieve input values from forms, I then create another class called LoginData with the same values but for a different purpose. When I console.log userData, everything works fine. However, when I try to console.log loginData, it shows as null.

constructor(private alertCtrl: AlertController, public navCtrl: 
    NavController, public navParams: NavParams, public authService: 
    UserProvider, public loadingCtrl: LoadingController, private toastCtrl: 
    ToastController) { 

    console.log(this.loginData)
}

userData = {
    "name":  "",
    "email": "" ,
    "Type_Id" : "", 
    "Mobile" : "",
    "password": "",
};

loginData = {
    UserEmail: this.userData.name ,
    Password:  this.userData.email
}

signup(){
  this.showLoader();
  console.log(this.loginData)

  this.authService.postData(this.userData,'Regestier').then((result) => {
    var userinfo = this.responseData;

    console.log(this.responseData);
    localStorage.setItem('userinfo', this.responseData);

    this.login()
    /* if (this.responseData.Type_Id = "1"){
    this.navCtrl.push(CompanyProfilePage, {}, {animate: true, direction: 
    'forward'});
    }
    else
    {
      this.navCtrl.setRoot(DashboardPage, {}, {animate: true, direction: 
      'forward'});

    }*/

    this.loading.dismiss();
    this.presentPrompt()
 },

 (err) => {
   // Error log
    this.loading.dismiss();

  });

}

I aim to use UserData to save sign up form Data and LoginData for storing login Data. While sign up is functioning correctly, there seems to be an issue with loginData returning null.

angular typescript ionic3 console.log

Answer 1

Answer №1

Make sure to place your userData and loginData within the constructor function.

export class MyComponent {

  userData; loginData;

  constructor(public navCtrl: NavController) {

    this.userData = {
      "name":  "",
      "email": "" ,
      "Type_Id" : "", 
      "Mobile" : "",
      "password": "",
    };

    this.loginData = {
      UserEmail: this.userData.name ,
      Password:  this.userData.email
    };
  }

  ngOnInit() {

    console.log(this.loginData);
  }

}

example

Answer 2

Make sure to place your userData and loginData within the constructor function.

export class MyComponent {

  userData; loginData;

  constructor(public navCtrl: NavController) {

    this.userData = {
      "name":  "",
      "email": "" ,
      "Type_Id" : "", 
      "Mobile" : "",
      "password": "",
    };

    this.loginData = {
      UserEmail: this.userData.name ,
      Password:  this.userData.email
    };
  }

  ngOnInit() {

    console.log(this.loginData);
  }

}

example

Answer 3

Answer №2

Your declaration process requires some adjustments to be more effective.

Utilize the Angular lifecycle hook ngOnInit() for handling your declarations:

ngOnInit(){
    this.loginData = {
       UserEmail: this.userData.name ,
       Password:  this.userData.email
    }
}

The Constructor serves as a default method in a class that runs upon instantiation to ensure proper initialization of fields within the class and its subclasses.

ngOnInit is a life cycle hook triggered by Angular2 once it completes building the component.

Answer 4

Your declaration process requires some adjustments to be more effective.

Utilize the Angular lifecycle hook ngOnInit() for handling your declarations:

ngOnInit(){
    this.loginData = {
       UserEmail: this.userData.name ,
       Password:  this.userData.email
    }
}

The Constructor serves as a default method in a class that runs upon instantiation to ensure proper initialization of fields within the class and its subclasses.

ngOnInit is a life cycle hook triggered by Angular2 once it completes building the component.

Answer 5

Answer №3

Utilizing Reactive forms is a straightforward process. Start by importing them into your app.module.ts file:

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

Then, include them in the imports array like this,

  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

Your component.ts file can resemble the following :

import { Component } from '@angular/core';
import { FormGroup,FormControl,FormBuilder } from '@angular/forms';

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 name = 'Angular';
 userData:FormGroup;
 constructor(fb:FormBuilder){
this.userData = fb.group({
  name : new FormControl(''),
  email : new FormControl(''),
  Type_Id : new FormControl(''),
  Mobile : new FormControl(''),
  Password : new FormControl(''),
 })
}

signup(){
console.log(this.userData.value.email);
console.log(this.userData.value.Password);
 }
}

Next, your component.html file can be structured as follows:

<form [formGroup]="userData" (ngSubmit)="signup()">
 <input type="text" formControlName="email">
 <input type="password" formControlName="Password">
 <button (click)="signup()">signup</button>
</form>

By following these steps, your code should run smoothly. Dive deeper into reactive forms for even more functionality!

Answer 6

Utilizing Reactive forms is a straightforward process. Start by importing them into your app.module.ts file:

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

Then, include them in the imports array like this,

  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

Your component.ts file can resemble the following :

import { Component } from '@angular/core';
import { FormGroup,FormControl,FormBuilder } from '@angular/forms';

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 name = 'Angular';
 userData:FormGroup;
 constructor(fb:FormBuilder){
this.userData = fb.group({
  name : new FormControl(''),
  email : new FormControl(''),
  Type_Id : new FormControl(''),
  Mobile : new FormControl(''),
  Password : new FormControl(''),
 })
}

signup(){
console.log(this.userData.value.email);
console.log(this.userData.value.Password);
 }
}

Next, your component.html file can be structured as follows:

<form [formGroup]="userData" (ngSubmit)="signup()">
 <input type="text" formControlName="email">
 <input type="password" formControlName="Password">
 <button (click)="signup()">signup</button>
</form>

By following these steps, your code should run smoothly. Dive deeper into reactive forms for even more functionality!

Upon executing a console.log on the class, it comes back as null

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to create dynamic meta tags in Angular that will appear in a Twitter-style card preview?

Converting "promises" to "string" using static methods in TypeScript

Employing Angular CLI for reverse proxying to an API Gateway/lambda service

Struggling with making the Angular directive compatible with ng-container

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Multiple consecutive XHR requests failed without any error message. The cause remains unknown

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Managing type declarations for two separate yet interlinked projects involves careful attention to ensure consistency and compatibility

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

Utilizing .js file alongside declaration files .d.ts in Angular: A guide

The validation for the prop 'setLoading' is not defined

Prisma queries are not automatically inferring Typescript types

Regular expressions are effective tools, but they may not be as functional within an

Calculate the date and time three months before or after a specified date

How can you effectively structure the routing between Angular2 and Laravel5?

The command 'ng' for Angular is not being detected as a valid internal or external command, executable program, or batch file, preventing access to the Angular app from outside the localhost

Innovative approaches to enhancing Feathers services through the use of relational data in design patterns

Confusion arises from the error message 'No overload matches this call'

Leverage a variety of environment files