如何根据 Angular 表单 onSubmit() 定义对象

Question

在我的 Angular 应用程序中，我能够发送 PUT 请求成功更新 JSON 文件。

现在，我正在尝试发送一个 POST 请求以将另一个对象添加到此 JSON 文件。

我单击 'Edit' 按钮，用现有记录填充一些输入字段。然后我进行更改并单击 'Save' 以成功更新 JSON。

现在，当我不单击 'Edit' 按钮，只是输入一些新数据，然后单击 'Save' 时，出现以下错误：

ERROR TypeError: Cannot set property 'fullName' of undefined

HTML 表格:

<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
    <button type="submit" class="btn btn-primary [disabled]="signUpForm.invalid">
Save
</button>
</form>

这是我的一些打字稿：

signUpForm: FormGroup;
employee: IEmployee;

ngOnInit() {

    this.signUpForm = this.fb.group({
      fullName: [''],
      contactPreference: [''],
      emailGroup: this.fb.group({
        email: [''],
        confirmEmail: [],
      }),
      phone: [''],
      skills: this.fb.array([
        this.addSkillFormGroup()
      ])
    });
}

onSubmit(): void {
    this.mapFormValuesToEmployeeModel();

    if (this.employee.id) {
        this._employeeService.updateEmployee(this.employee).subscribe(
          () => this.loadExistingEmployees(),
          (err) => console.log(err)
        );
     } else {
    console.log('TODO: Add POST functionality here');
    }
}

mapFormValuesToEmployeeModel() {
    this.employee.fullName = this.signUpForm.value.fullName;
    this.employee.contactPreference = this.signUpForm.value.contactPreference;
    this.employee.email = this.signUpForm.value.emailGroup.email;
    this.employee.phone = this.signUpForm.value.phone;
    this.employee.skills = this.signUpForm.value.skills;
}

代码在到达 mapFormValuesToEmployeeModel() 方法的第一行时崩溃。

这是员工界面：

export interface IEmployee {
  id: number;
  fullName: string;
  email: string;
  phone?: number;
  contactPreference: string;
  skills: ISkill[];
}

有人可以告诉我需要进行哪些更改才能使 POST 正常工作吗？

我认为问题在于我需要在某处分配 employee 对象的 ID，但我不确定具体在哪里执行此操作。

Answer 1

尝试在使用前初始化 employee 对象。可能是这样的：

// these should be some default values, they will be replaced later
employee: IEmployee = { id: -1, fullName: '', email: '', contactPreference: '', skills: []};

或

employee: IEmployee = { } as IEmployee;

然后就可以在mapFormValuesToEmployeeModel方法里面使用了。

旁注：如果您尝试将表单中的值绑定到 employee 变量，您可能需要为此目的使用 NgModel 指令。

如何根据 Angular 表单 onSubmit() 定义对象

How to define an Object based on Angular Form onSubmit()

typescript

angular

angular-httpclient