Angular PrimeNG p-calendar reactive form on patchValue error Unexpected literal at position 2

Question

In Angular 13 application, using 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>

using in a Reactive form, it is working fine while save new form.same form I am using for edit also. To edit the form loading the data based on code. But while patchValue to the form, getting the error ERROR Unexpected literal at position 2

the edit code

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

      this.theForm.patchValue(res);

Rest of fileds path value is working fine.

I see the date formats are different, in `eventStartDate` are you sure this is expected? — Deepak Jha, Dec 19 '21 at 14:40
Hey Deepak, yea in DB it is storing as yy--mm-dd. also, in p-calendar I changed the format to dateFormat="yy/mm/dd", but error — Manu, Dec 19 '21 at 15:20

score 2 · Answer 1 · answered Dec 19 '21 at 15:53

Before patchValue set the date as new Date.

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);

score 0 · Answer 2 · answered Dec 19 '21 at 18:20

Give complete way to your res where res have to patched. For FormArray you have to make getter first and the can you use Push or insert method to patch with form array

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

score 0 · Answer 3 · answered Jan 12 '22 at 16:20

0

I had similar error. Make sure having field type as Date and set it as new Date before patchValue on form.

answered Jan 12 '22 at 16:20

Bozy

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Miguel Jan 12 '22 at 20:40

score 0 · Answer 4 · answered May 19 '23 at 20:08

One way is to use 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,
  }
);

score 0 · Answer 5 · answered Aug 22 '23 at 06:55

The P-Calendar component needs the Date object as a value, you cannot pass it to other types of objects. Therefore, when patching, be sure to access the form's controls and create it with a date object.

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

Angular PrimeNG p-calendar reactive form on patchValue error Unexpected literal at position 2

5 Answers5