无法设置未定义角度的属性“”答案

【问题标题】：Cannot set property '' of undefined angular无法设置未定义角度的属性“”
【发布时间】：2021-01-21 00:14:46
【问题描述】：

我是 js 和 Angular 的新手。我正在尝试为我的 var (churnDataInput) 设置值。下面是我的代码。

 **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);
 }

}

我的模型类（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){}

 }

当我尝试在 onsubmit() 中分配 formcheck.component.ts 类中的值时 (this.churnDataInput.Satisfaction_level = this.churnForm.get('Satisfaction_level').value.toString();)

我得到错误（core.js:4197 ERROR TypeError: Cannot set property 'Satisfaction_level' of undefined）

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

您的 churnDataInput 似乎从未初始化，因此未定义。所以你得到了错误。

尝试将你的 onInit 函数修改为

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), 
 });

【讨论】：

【解决方案2】：

您可能想使用FormBuilder 在构造函数中包含表单生成器，如

constructor(private formBuilder: FormBuilder) {

然后初始化表单

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

还包括响应式表单模块。

【讨论】：

【解决方案3】：

您忘记初始化churnDataInput 变量，它是churnData 的对象。

写

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

或在构造函数中启动它

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

【讨论】：

【解决方案4】：

除了@brk sais：使用这样的表单组，您还可以使用 .getRawValue()（如果您想要全部，包括禁用的输入）或简单的 .value 来提取整个模型，因此您的提交可能是：

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

由于您只希望字符串作为输入，因此请确保不要将字段设置为 type=number，否则所有属性都将是字符串。

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

【讨论】：