Как определить объект на основе угловой формы onSubmit ()

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, но я не совсем точно знаю, где это сделать.

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 для этой цели.