1

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

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

1 回答 1

1

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

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

于 2019-12-17T15:20:18.110 回答