Cannot set property '' of undefined angular

Question

I am new to js and angular. I am trying to set the value for my var (churnDataInput). Below is my code.

 **formcheck.component.ts**
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ConServiceService } from '../shared/con-service.service';
 import { churnData } from '../shared/data.model';

 @Component({
 selector: 'app-formcheck',
 templateUrl: './formcheck.component.html',
 styleUrls: ['./formcheck.component.css']
 })
 export class FormcheckComponent implements OnInit {

 churnForm: FormGroup;
 churnDataInput: churnData;



 constructor(private conservice: ConServiceService) { }

 ngOnInit(): void {

 this.churnForm = new FormGroup({
  'Satisfaction_level' : new FormControl(null),
  'last_evaluation': new FormControl(null),
  'number_project': new FormControl(null),
  'average_monthly_hrs': new FormControl(null),
  'time_speed_company': new FormControl(null),
  'work_accident': new FormControl(null),
  'promotion': new FormControl(null),
  'salary': new FormControl(null),
  'employee_dept': new FormControl(null), 
 });

}


onSubmit()
{

 this.churnDataInput.Satisfaction_level = this.churnForm.get('Satisfaction_level').value.toString();

 this.churnDataInput.last_evaluation = this.churnForm.get('last_evaluation').value.toString();
 this.churnDataInput.number_project = this.churnForm.get('number_project').value.toString();
 this.churnDataInput.average_monthly_hrs = 
 this.churnForm.get('average_monthly_hrs').value.toString();
 this.churnDataInput.time_speed_company = this.churnForm.get('time_speed_company').value.toString();
 this.churnDataInput.work_accident = this.churnForm.get('work_accident').value.toString();
 this.churnDataInput.promotion = this.churnForm.get('promotion').value.toString();
 this.churnDataInput.salary = this.churnForm.get('salary').value.toString();
 this.churnDataInput.employee_dept = this.churnForm.get('employee_dept').value.toString();

 this.conservice.AddData(this.churnDataInput);
 }

}

My model class (data.model.ts)

 export class churnData
 {
  constructor(public Satisfaction_level: string, public last_evaluation:string, public 
  number_project:string, public average_monthly_hrs:string, public time_speed_company:string, public 
  work_accident:string, public promotion:string, public salary:string, public employee_dept:string){}

 }

When I am trying to assign the value in formcheck.component.ts class in onsubmit() ( this.churnDataInput.Satisfaction_level = this.churnForm.get('Satisfaction_level').value.toString();)

I get error as (core.js:4197 ERROR TypeError: Cannot set property 'Satisfaction_level' of undefined)

Answer 1

It seem that your churnDataInput is never initialised hence is undefined. so you get the error.

Try to modify your onInit function to

ngOnInit(): void {

 /* Init the charInput variable*/
 this.churnDataInput = new churnData(/* whatever this constructor needs */)
 this.churnForm = new FormGroup({
  'Satisfaction_level' : new FormControl(null),
  'last_evaluation': new FormControl(null),
  'number_project': new FormControl(null),
  'average_monthly_hrs': new FormControl(null),
  'time_speed_company': new FormControl(null),
  'work_accident': new FormControl(null),
  'promotion': new FormControl(null),
  'salary': new FormControl(null),
  'employee_dept': new FormControl(null), 
 });

Answer 2

You may want to use FormBuilder In constructor include form builder like

constructor(private formBuilder: FormBuilder) {

then initialize the form

this.churnForm =  this.formBuilder.group({
      Satisfaction_level: [''],
      // rest of form elements
    });

Also include reactive form module.

Answer 3

You forgot to initialize the churnDataInput variable which is object of churnData.

write

 churnDataInput: churnData= new churnData(.....);//Pass values to constructor

or initiate it in constructor

this.churnDataInput = = new churnData(.....);//Pass values to constructor

Answer 4

in addition to what @brk sais: using a formgroup like this, allows you to extract the entire model by using .getRawValue() (if you want all, including disabled inputs) or simply .value, so your submit could be:

onSubmit() {
 this.churnDataInput = this.churnForm.getRawValue();
 this.churnDataInput = this.churnForm.value;
}

Since you only want strings as an input, make sure to not set the fields to type=number, then all properties will be strings anyways.

see https://angular.io/api/forms/FormGroup: