get the value in string date format instead of a value of type date when selecting a value of a formally custom type

Question

I have created a formly custom form type. It's a primeng calendar

Custom type component

@Component({
  selector: 'ts-multi-shl-siep-admin-global-formly-calendar-type',
  template: `<div>
    <label for="">{{ to.label }}</label>
    <p-calendar
      [formControl]="formControl"
      dateFormat="yy-mm-dd"
      [showIcon]="true"
    ></p-calendar>
  </div>`,
  styles: [':host ::ng-deep .p-calendar { width: 100%; }'],
})
export class FormlyCalendarTypeComponent extends FieldType<FieldTypeConfig> {}

In appModule register the new custom type

FormlyModule.forRoot({
  types: [
    { name: 'formlyCalendarType', component: FormlyCalendarTypeComponent },
  ],
  wrappers: [{ name: 'panel', component: PanelWrapperComponent }],
}),

Use the created custom type in the form config

{
  key: 'openDate',
  type: 'formlyCalendarType',
  props: {
    required: true,
    label: 'Date',
  },
},

In the component the model looks like this

model = {
  openDate: '1980-02-02'
}

But when I change the date value of the calendar, the openDate property takes a date-type value. For example:

model = {
  openDate: Date Thu Oct 11 2018 00:00:00 GMT-0600 (Central Standard Time)
}

How when changing the value of a calendar can I get the value as a string date instead of a date type value?

With this end I try the following

export class FormlyCalendarTypeComponent extends FieldType<FieldTypeConfig> {
  constructor() {
    super();

    this.formControl.valueChanges.subscribe({
      next: (value) => {
        return value.toISOString().split('T')[0];
      },
    });
  }
}

But I get that this.formControl does not exist

Thanks in advance

Answer 1

You can change the data type of the value to write back to formControl or ngModel using dataType property just add to your p-calender dataType="string" because the default value is date.

    <p-calendar [formControl]="formControl" dataType="string" [showIcon]="true"></p-calendar>