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

616 Views Asked by At

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.

0

There are 0 best solutions below