Angular 앱의 기본 날짜를 JSON으로 변환하는 형식

Question

날짜 선택기 ( mat-datepicker각 재료 라이브러리에서 사용 하고 있음) 및 기타 입력을 포함하는 여러 반응 형 형식을 가진 구성 요소 (각도 앱 내부)를 가정합니다 . 사용자가 "제출"버튼을 누른 후 양식의 값을 백업 (사용 HttpClient.post)으로 보냅니다 . 문제는 백엔드가 다른 형식을 예상하는 동안 datepicker 필드가 "2020-11-18T22:00:00.000Z"(분명히 Date.toJSON()메서드가 호출 됨) 직렬화된다는 것 입니다.

formlylib를 사용하여 양식을 작성하고 있으므로 각 양식의 구성 요소 집합이 다를 수 있습니다. 익숙하지 않을 수도 formly있지만 어쨌든 datepicker 집합도 다를 수 있으므로 datepicker 필드를 직접 변환 할 수 없습니다. 양식 값을 보내는 장소에서 날짜 필드의 정확한 목록을 모르기 때문입니다.

내 문제에 대한 우아한 해결책이 있습니까? Date.prototype.toJSON()서버에 전송 된 객체를 멍키 패치 하거나 루핑 하는 것보다 더 나은 것을 생각할 수 없습니다. 필드 유형을 확인하고 필드가 Date? 자료 또는 형식적으로 datepicker가 출력하는 값의 형식을 설정하는 방법을 찾을 수 없습니다.

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);
  }

이제 원래 구성 요소를 추가 한 방식으로 새 구성 요소를 양식에 추가 할 수 있습니다.

다음은 실행중인 stackblitz 예제입니다.

Answer 2

HTTP 인터셉터를 사용하려고합니다. 인터셉터를 사용하여 신체의 모든 날짜를 다른 것으로 변경할 수 있다고 생각합니다.

여기에 링크 설명 입력 은 인터셉터가 작동하는 방법의 예입니다. 이 예에서는 헤더가 추가됩니다. 여기 와 여기 에 본문을 수정하는 예가 있습니다.

Answer 3

나는 같은 문제가 있었다. 앱 구성 요소에서 JSON 날짜 변환기를 재정 의하여이 문제를 해결할 수 있습니다. :

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

앱 구성 요소의 생성자에서이 함수를 한 번 호출합니다. 함수 내에서 논리를 적용 할 수 있지만 현재 문자열로 반환해야합니다.