如何在发布请求之前首先将 FormGroup 日期转换为 systimestamp

Question

I have date of systimestamp(2020-10-20 23:16:24.727272) in my object which come from the DB which I intend to edit. .substring(0, 10) was used so on the edit form I got 2020-10-20, now after I edited the data and submited the form, I want the date to be converted back to the systimestamp(2020-10-20 23:16:24.727272) format on POST request.

I already read on date conversion but the question here is if it is possible to access the 2020-10-20 coming from FormGroup and convert it before calling post request.

comp.ts

//data to be edited
{
"game": "away",
"date": "2020-10-20 23:16:24.727272"
}

//show data on form
gameDetail(data: any) {
  this.formData.controls.game.setValue( data.game );
  this.formData.controls.date.setValue( data.date.substring(0, 10) );
}

//after edit and submit button
postEdit() {
        // ....is it possible to convert or .getTime() the data here before update. 
        //The "this.formData.value" holds the object new values
  this.service.update( this.formData.value )
    .subscribe( data => {
         this.data = data;
     }
}

html

<form [formGroup]="formData" (ngSubmit)="postEdit()">
   //.......

I want to know how to access the form date for manipulation..

Answer 1

I'm with ZetaPR for using a sensfull date-time-library. I personally like moment.js.

This is a possible solution:

 import {Component, OnInit} from "@angular/core"; import {FormBuilder, FormControl, FormGroup} from "@angular/forms"; import {Moment} from "moment"; import * as moment from "moment"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"] }) export class AppComponent implements OnInit { data: IData; formGroup: FormGroup; constructor( private service: any, private fb: FormBuilder, ) { } ngOnInit() { this.data = this.gameDetail({ game: "away", data: "2020-10-20 23:16:24.727272" }); this.formGroup = this.fb.group({ gameCtrl: new FormControl(this.data.game), dateCtrl: new FormControl(this.data.date.format("yyyy-MM-dd")) }); // here your data object is updated by the formGroup this.formGroup.controls.gameCtrl.valueChanges .subscribe(value => this.data.game = value); this.formGroup.controls.dateCtrl.valueChanges .subscribe(val => this.data.date = moment(val)); } postEdit() { // Your data object is already updated const dataToPost = { game: this.data.game, date: this.data.date.format("yyyy-MM-dd hh:mm:ss:ms") // hope this is the right pattern. check momentjs.com }; this.service.update( dataToPost ) .subscribe( data => { this.data = data; }); } gameDetail(data: any) { return { game: data.game, date: moment(data.date) }; } } export interface IData { "game": string; "date": Moment; }