'How do I map a `datetime-local` form control value to an epoch time property and back in Angular Reactive Forms?

I have an underlying data object that represents a timestamp property as a number representing milliseconds since Epoch.

   export class Activity {
      constructor(
        public timestamp: number=0,
      ) {}
    }

I have a form with a FormControl for that form input field.

  activityForm = new FormGroup({
    timestamp: new FormControl('', [
      Validators.required,
    ]),
  });

I want to use the HTML datetime-local type to view and edit this field (where "local" is UTC)

<input 
    class="form-control" 
    type="datetime-local" 
    id="inputTimestamp" 
    formControlName="timestamp"
/>

A datetime-local control expects, and produces, the date time as an ISO String, not an epoch timestamp.

I have two functions defined in my component;

toDatetime(timestamp: number) { return new Date(timestamp).toISOString().slice(0, 16);}

and

fromDatetime(datetime: string) { return new Date(datetime).getTime(); }

How do I hook these up to the form field to do two-way conversion? Or can it only be done during ngOnInit() and onSubmit()?

Update*: In an ideal world, I'd like to simply save this.activityForm.values in my onSubmit() function, expecting that timestamp is accurately calculated and saved, without manually copying object properties.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source