एंगुलर ऐप में JSON रूपांतरण प्रारूप के लिए डिफ़ॉल्ट तिथि

Question

मान लीजिए कि एक घटक (कोणीय ऐप के अंदर) में कई प्रतिक्रियाशील रूप होते हैं जिनमें डेटापिकर्स होते हैं (मैं mat-datepickerकोणीय सामग्री के लिबास से उपयोग कर रहा हूं ) और अन्य इनपुट। उपयोगकर्ता द्वारा "सबमिट" बटन हिट करने के बाद, मैं फॉर्म के मूल्य को समर्थित (के साथ HttpClient.post) भेजता हूं । समस्या यह है कि डेटकिपर फ़ील्ड को क्रमबद्ध रूप में रखा जाता है "2020-11-18T22:00:00.000Z"(स्पष्ट रूप से Date.toJSON()विधि कहा जाता है) जबकि बैकएंड अन्य प्रारूप की अपेक्षा करता है।

ध्यान दें कि मैं formlyअपने प्रपत्र बनाने के लिए lib का उपयोग कर रहा हूं , प्रत्येक प्रपत्र पर घटकों का सेट भिन्न हो सकता है। आप परिचित नहीं हो सकते हैं, formlyलेकिन वैसे भी तारीखों के सेट के रूप में अच्छी तरह से भिन्न हो सकते हैं, इसलिए मैं दिनांक फ़ील्ड को सीधे रूप में परिवर्तित नहीं कर सकता क्योंकि मुझे तारीख फ़ील्ड की सटीक सूची ऐसी जगह नहीं पता है जहां मैं रूपों का मूल्य भेजता हूं।

क्या मेरी समस्या का एक सुंदर समाधान है? Date.prototype.toJSON()सर्वर पर भेजे गए ऑब्जेक्ट्स के माध्यम से बंदर-पैचिंग या लूपिंग से बेहतर कुछ नहीं सोच सकते हैं , यदि यह है तो फ़ील्ड्स के प्रकार और फ़ील्ड को बदलते रहें Date? मुझे या तो सामग्री में या औपचारिक रूप से डेटपिकर द्वारा मूल्य आउटपुट के प्रारूप को सेट करने का तरीका नहीं मिल रहा है।

Answer 1

ControlValueAccessor को लागू करना एक सुरुचिपूर्ण समाधान होगा। विचार यह है कि एक तारीख पिकर घटक बनाया जाए जो आपके दिनांक प्रारूप को इनपुट के रूप में लेता है और आउटपुट के रूप में आपके प्रारूप को वापस भेजता है।

उसके लिए आपको बस एक नया घटक बनाना होगा जिसे मैं MatDatepickerWrapperComponentइस उदाहरण के लिए कहूंगा । इस घटक का टेम्प्लेट भौतिक दिनांक पिकर से अधिक कुछ नहीं होगा:

<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>

घटक पक्ष से, आपको ControlValueAccessor को लागू करना होगा , और आपके द्वारा आवश्यक परिवर्तनों को करना होगा:

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

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

अब आप नए घटक को उस रूप में जोड़ सकते हैं जिस तरह से आपने मूल एक को जोड़ा होगा।

यहाँ एक चल स्टैकब्लिट्ज़ उदाहरण है।

Answer 2

मैं एक HTTP इंटरसेप्टर का उपयोग करने की कोशिश करूंगा। मुझे लगता है कि आप शरीर में सभी तिथियों को किसी और चीज़ में बदलने के लिए अपने इंटरसेप्टर का उपयोग करने में सक्षम हो सकते हैं।

इंटर लिंक विवरण यहाँ कैसे इंटरसेप्टर काम करता है का एक उदाहरण है। उदाहरण में, एक हेडर जोड़ा जाता है। यहाँ और यहाँ शरीर को संशोधित करने का एक उदाहरण है।

Answer 3

मुझे भी यही समस्या थी। मैं एप्लिकेशन घटक में JSON दिनांक कनवर्टर को ओवरराइड करके इसे हल कर सकता हूं।:

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

मैं ऐप फंक्शन के कंस्ट्रक्टर में एक बार इस फ़ंक्शन को कॉल करता हूं। आप फ़ंक्शन के अंदर आवेदन कर सकते हैं और तर्क कर सकते हैं, लेकिन वर्तमान स्ट्रिंग के साथ वापस जाना सुनिश्चित करें।