使用 Angular 6 更新表单值时的延迟

Question

我注意到，当我尝试在使用 HTTP 客户端提交之前更新 FormBuilder 中的几个值时，我的值没有更新。当我运行第二次提交时，这些值被更新。

private mergeDates(dateValue: string, timeValue: string): string {
  const returnValue = dateValue.toString().replace(' 00:00', ` ${timeValue}`);
  return returnValue;
}

private submitVacancy() {
  if (this.vacancyForm.invalid) {
    return;
  }
  const fValue = this.vacancyForm.value;
  const fControls = this.vacancyForm.controls;
  fControls['beginDateTime'].setValue(
    this.mergeDates(fValue['beginDate'], fValue['beginTime']),
  );
  fControls['endDateTime'].setValue(
    this.mergeDates(fValue['beginDate'], fValue['endTime']),
  );
  alert(JSON.stringify(fValue));
  this.http.post(`${this.apiUri}/addvacancy`, JSON.stringify(fValue));
}

Answer 1

我按照 Mateusz 的建议在我的代码中添加了以下行，现在它可以正常工作了。我的代码现在看起来像这样。

private mergeDates(dateValue: string, timeValue: string): string {
  const returnValue = dateValue.toString().replace(' 00:00', ` ${timeValue}`);
  return returnValue;
}
private submitVacancy() {
  if (this.vacancyForm.invalid) {
    return;
  }

  const fControls = this.vacancyForm.controls;
  let fValue = this.vacancyForm.value;

  fControls['beginDateTime'].setValue(
    this.mergeDates(fValue['beginDate'], fValue['beginTime']),
  );

  fControls['endDateTime'].setValue(
    this.mergeDates(fValue['beginDate'], fValue['endTime']),
  );

  fValue = this.vacancyForm.value;
  alert(JSON.stringify(fValue));
  console.log(JSON.stringify(fValue));
  this.http.post(`${this.apiUri}/vacancy`, JSON.stringify(fValue));
}

我在运行我的 setValue() 之后添加了 fValue = this.vacancyForm.value;。

使用 Angular 6 更新表单值时的延迟

Delay when updating form values with Angular 6

forms

formbuilder

angular

angular-reactive-forms

angular6