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

Question

我是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错误TypeError：无法设置未定义的属性'Satisfaction_level'）

Answer 1

您可能想使用FormBuilder 在构造函数中，包括诸如

constructor(private formBuilder: FormBuilder) {

然后初始化表格

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

还包括反应形式模块。

Answer 2

似乎您的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), 
 });

Answer 3

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

写

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

或在构造函数中启动

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

Answer 4

除了@brk所说的之外：使用这样的表单组，可以让您使用.getRawValue（）（如果需要全部，包括禁用的输入）或简单地使用.value提取整个模型，因此您的提交可以是：

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

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

请参见https://angular.io/api/forms/FormGroup：