Question

我有一个复杂的图形，我想用表单生成器创建一个反应式并将对象传递给表单生成器

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

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

下面是HTML代码：

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

使用了不同的技术，例如构建自定义管道和自定义指令，但结果未以所需格式显示。 formControlName （在上述HTML中使用）仅接受角度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);
  }
}

Answer 1

如果您可以放宽原始时间（因为无论如何您都不会将其显示给用户），我会在表单创建过程中将其转换为字符串，然后使用(new Date(form.value.SelectedDate)).toUTCString()将其转换为字符串完整的后端UTC。

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

如何使用Ngrx和反应式表单在Angular中显示日期和时间戳

1 个答案: