Tanggal Default ke format konversi JSON di aplikasi Angular

Question

Misalkan sebuah komponen (di dalam aplikasi sudut) memiliki beberapa bentuk reaktif yang berisi datepickers (saya menggunakan mat-datepickerdari bahan sudut lib) dan masukan lainnya. Setelah pengguna menekan tombol "Kirim", saya mengirim nilai formulir ke didukung (dengan HttpClient.post). Masalahnya adalah bahwa bidang datepicker diserialkan sebagai "2020-11-18T22:00:00.000Z"(jelas Date.toJSON()metode dipanggil) sementara backend mengharapkan format lain.

Perhatikan bahwa saya menggunakan formlylib untuk membangun formulir saya, karena kumpulan komponen pada setiap formulir mungkin berbeda-beda. Anda mungkin tidak terbiasa dengan formlytetapi bagaimanapun set datepickers dapat bervariasi juga, jadi saya tidak dapat mengonversi bidang datepicker secara langsung karena saya tidak tahu daftar persis bidang tanggal di tempat saya mengirim nilai formulir.

Apakah ada solusi elegan untuk masalah saya? Tidak dapat memikirkan sesuatu yang lebih baik daripada menambal monyet Date.prototype.toJSON()atau mengulang melalui objek yang dikirim di server, periksa jenis bidang dan ubah bidang jika itu a Date? Saya tidak dapat menemukan cara untuk mengatur format output nilai oleh datepicker baik dalam materi atau secara formal.

Answer 1

Menerapkan ControlValueAccessor akan menjadi solusi yang elegan. Idenya adalah untuk membuat komponen pemilih tanggal yang mengambil format tanggal Anda sebagai masukan dan mengirim kembali format Anda sebagai keluaran.

Untuk itu Anda hanya perlu membuat komponen baru yang akan saya panggil MatDatepickerWrapperComponentuntuk contoh ini. Template komponen ini tidak lebih dari pemilih tanggal material:

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="model" (ngModelChange)="modelChange($event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Dari sisi komponen, Anda harus mengimplementasikan ControlValueAccessor , dan melakukan transformasi yang Anda perlukan:

writeValue(value: string): void {
    this.model = transformDateFromMyFormatToIso(value);
}

modelChange(value: string) {
    const transformedValue = transformIsoDateToMyFormat(value);
    this.onChange(transformedValue);
  }

Sekarang Anda dapat menambahkan komponen baru ke formulir seperti Anda menambahkan yang asli.

Berikut adalah contoh stackblitz yang sedang berjalan.

Answer 2

Saya akan mencoba menggunakan interseptor HTTP. Saya pikir Anda mungkin dapat menggunakan interseptor Anda untuk mengubah semua tanggal di tubuh menjadi yang lain.

masukkan deskripsi tautan di sini adalah contoh cara kerja pencegat. Dalam contoh, sebuah header ditambahkan. Di sini dan di sini adalah contoh memodifikasi bodi.

Answer 3

Saya memiliki masalah yang sama. Saya bisa menyelesaikan ini dengan mengganti konverter tanggal JSON di komponen aplikasi .:

overrideToJSONDate() {
    Date.prototype.toJSON = function () {
      return new Date(this).toLocaleString();
    }
  }

Saya memanggil fungsi ini sekali dalam konstruktor komponen aplikasi. Anda dapat menerapkan dan logika di dalam fungsi tetapi pastikan, untuk kembali dengan string saat ini.