带有表单和 Angular 日期的 Angular/HTML 输入本地日期时间答案

【问题标题】：Angular/HTML input datetime-local with forms and Angular date带有表单和 Angular 日期的 Angular/HTML 输入本地日期时间
【发布时间】：2021-06-10 06:41:37
【问题描述】：

在我的 Angular 应用程序中，我希望用户选择约会的日期和时间，我正在尝试使用

<input matInput type="datetime-local"...>

元素。但是这个控件需要绑定一个表单，所以我创建了一个表单

public form: FormGroup;

constructor(_formBuilder: FormBuilder) {
  this.form = _formbuilder.group({
    datetime: new Date()
  });
}

然后我将input 包装成这种形式，这样它就变成了

<form [formGroup]="form">
    <input matInput type="datetime-local" formControlName="datetime">
</form>

这很好用，因为日期时间已插入到我的表单中，但初始值只是空白

这一直是空白，直到我开始更改它。我假设是因为输入需要一个字符串？我宁愿给它一个日期，甚至给它一个字符串

constructor(_formBuilder: FormBuilder) {
   this.form = _formbuilder.group({
     datetime: new Date().toDateString()
   });
}

产生完全相同的结果。那么如何将其绑定到 Typscript Date 对象并以初始值开始显示呢？

【问题讨论】：

标签： html angular angular-forms html-input

【解决方案1】：

此外，您可以使用here 所述的任何格式。

【讨论】：

【解决方案2】：

HTML 日期时间本地输入需要 'yyyy-MM-ddTHH:mm' 格式，但已给出日期对象。

所以你使用 Angular 日期管道作为另一种转换方式。

  import { DatePipe } from '@angular/common';

  public form: FormGroup;

  constructor(
    _formBuilder: FormBuilder,
    private datePipe: DatePipe,
    ) {
      this.form = _formbuilder.group({
        datetime: this.datePipe.transform(new Date(), 'yyyy-MM-ddTHH:mm')
      });
  }

【讨论】：