如何使用 Ngrx 和 Reactive Form 在 Angular 中显示日期和时间戳答案

【问题标题】：How can date and timestamp be shown in Angular using Ngrx and Reactive Form如何使用 Ngrx 和 Reactive Form 在 Angular 中显示日期和时间戳
【发布时间】：2020-04-07 20:33:14
【问题描述】：

我有复杂的图表，我想用表单构建器创建一个反应式并在表单构建器中传递对象

this.objectForm = this.formBuilder.group({
                    ...this.object
                  });

我从后端收到了 UTC 格式的日期（例如2011-08-12T20:17:46.384Z）。我只想在mat-input 字段中显示日期，但是当用户关注他的日期和时间时，两者都应该保存在商店中。我不想向用户显示时间，但我希望它保存在数据库和 Ngrx 存储中。

以下是 HTML 代码：

<input matInput type="date" formControlName="SelectedDate" name="SelectedDate" id="SelectedDate" 
dateTime>

使用不同的技术，例如构建自定义管道和自定义指令，但结果未以所需格式显示。 formControlName（在上面提到的 HTML 中使用）只接受 angular 8 中的字符串，type='date' 只接受日期而不是时间。

下面是我们目前正在尝试的代码：

import {Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {NgControl, NgModel} from '@angular/forms';
import {DatePipe, DecimalPipe} from '@angular/common';

@Directive({
  selector: '[dateTime][formControlName]',
})
export class DateTime {


  constructor(private el: ElementRef, public datePipe: DatePipe, private model: NgControl) {
  }

  ngOnInit() {
    this.el.nativeElement.value = this.datePipe.transform(this.model.control.value, 'yyyy-MM-dd');
    this.model.viewToModelUpdate(this.el.nativeElement.value);
  }


  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {

  }

  @HostListener('focusout')
  focusOUt() {
    let date: Date = new Date(this.el.nativeElement.value);
  }
}

【问题讨论】：

这不适合material.angular.io/components/datepicker/overview 吗？
Ngrx 在保存日期方面存在问题（仅存储原始类型），因此将其存储为字符串并将其转换为组件中的日期

标签： angular ngrx angular-reactive-forms angular-directive date-pipe

【解决方案1】：

如果您可以放弃原始时间（因为无论如何您都没有向用户显示它），我只需在创建表单期间将其转换为字符串，然后使用 (new Date(form.value.SelectedDate)).toUTCString() 将其转换回完整的 UTC用于后端。

如果原始时间很重要，则将日期时间拆分为 SelectedDate 和 SelectedTime。然后，您可以在 mat-input 中单独处理 SelectedDate 并在保存时将其与 SelectedTime 组合，然后再发送回后端。

【讨论】：