Question

在Angular应用中，我可以发送一个PUT请求，该请求可以成功更新JSON文件。

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

我单击“编辑”按钮，该按钮会使用现有记录填充一些输入字段。然后，我进行更改并单击“保存”以成功更新JSON。

现在，当我不单击“编辑”按钮，而只是输入一些新数据，然后单击“保存”时，出现以下错误：

错误TypeError：无法设置未定义的属性'fullName'

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指令。

如何基于角度形式onSubmit（）定义对象

1 个答案: