patchValue 错误上的 Angular PrimeNG p-calendar 反应形式 位置 2 处的意外文字

Posted 2023-03-13

【中文标题】patchValue 错误上的 Angular PrimeNG p-calendar 反应形式 位置 2 处的意外文字

【英文标题】：Angular PrimeNG p-calendar reactive form on patchValue error Unexpected literal at position 2

【发布时间】：2022-01-21 12:02:21

【问题描述】：

在 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 到表单时，得到错误 ERROR 位置 2 的意外文字

编辑代码

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

      this.theForm.patchValue(res);

文件路径值的其余部分工作正常。

【问题讨论】：

我看到日期格式不同，eventStartDate 你确定这是预期的吗？

嘿，Deepak，是的，它在 DB 中存储为 yy--mm-dd。另外，在 p-calendar 中，我将格式更改为 dateFormat="yy/mm/dd"，但错误

【参考方案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);

【参考方案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);
    )
    

【参考方案3】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。