patchValue 上的 Angular PrimeNG p 日历反应形式错误位置 2 出现意外文字

Question

在 Angular 13 应用程序中，使用 PrimeNG Calendar

<p-calendar [minDate]="today" [showIcon]="true" styleClass="form-control" showButtonBar="true"
                                dateFormat="dd/mm/yy" inputId="icon" placeholder="dd/mm/yy"
                                formControlName="eventStartDate"></p-calendar>

在反应式表单中使用，它在保存新表单时工作正常。我也使用相同的表单进行编辑。 编辑基于代码加载数据的表单。 但是当

patchValue

到表单时，出现错误 错误位置 2 出现意外文字

编辑代码

loadEventToEdit() {
    this.eventService.getEventByCode(this.eventCode).subscribe((res) => {
      this.event = res;
      console.log('the event to update', this.event);

      this.theForm.patchValue(res);

其余字段路径值工作正常。

Answer 1

在

patchValue

之前将日期设置为新日期。

loadEventToEdit() {
    this.eventService.getEventByCode(this.eventCode).subscribe((res) => {
      this.event = res;
      console.log('the event to update', this.event);

      this.event.timing.eventStartDate = new Date(
        this.event.timing.eventStartDate
      );

      this.theForm.patchValue(this.event);

Answer 2

为需要修补资源的资源提供完整的路径。 对于 FormArray，你必须先制作 getter，然后你可以使用 Push 或 insert 方法来修补表单数组

 loadEventToEdit() {
        this.eventService.getEventByCode(this.eventCode).subscribe((res) => {
          this.event = res;
         this.theForm.controls['eventStartDate'].patchValue(this.event.timing.eventStartDate);
    })
    }

Answer 3

我也有类似的错误。 确保字段类型为日期，并将其设置为表单上 patchValue 之前的新日期。

Answer 4

一种方法是使用 DayJS。

let dates = [
  dayjs(feature?.start_date, 'MM-DD-YYYY').toDate(),
  dayjs(feature?.end_date, 'MM-DD-YYYY').toDate(),
];

this.form.patchValue(
  {
    dateRange: dates || null
  },
  {
    emitEvent: false,
    onlySelf: true,
  }
);

Answer 5

P-Calendar 组件需要 Date 对象作为值，不能将其传递给其他类型的对象。因此，在修补时，请务必访问表单的控件并使用日期对象创建它。

response => {
   this.yourForm.controls['likeStartDate'].patchValue(new Date(response.startDate));         }