Angular 5将日期绑定到字段（反应形式）答案

【问题标题】：Angular 5 bind date to field (reactive forms)Angular 5将日期绑定到字段（反应形式）
【发布时间】：2021-05-05 04:52:08
【问题描述】：

我的输入类型日期有问题。我想从组件绑定数据。这是我的领域：

<div class="col-md-6">
    <label for="dateOfReport">Data zgłoszenia błędu:</label>
    <input type="date" formControlName="dateOfReport" id="dateOfReport" class="form-control" [value]="report.dateOfReport | date:'dd.MM.yyyy'"> {{report.dateOfReport | date:'dd.MM.yyyy'}}
  </div>

以下是变量 dateOfReport 的外观：

new Date().toJSON().slice(0, 10)

我哪里失败了？ {{ .. }} 显示好的日期，但我的字段没有将其作为默认值。

【问题讨论】：

我也无法使用响应式表单在 input[type=date] 上初始化一个值

标签： javascript angular typescript

【解决方案1】：

在使用 Reactive Forms 时，不应直接将数据绑定到控件，而应使用 FormGroup 的 setValue() 或 patchValue()。

【讨论】：

【解决方案2】：

在使用响应式表单创建表单时，我找到了将日期绑定到输入的答案。

我正在使用 Angular 11。

这里是 HTML

<div class="form-group">
  <label for="dateOfReport">Report Date</label>
  <input type="date" class="form-control" name="dateOfReport" id="dateOfReport" formControlName="dateOfReport" />
</div>

这是我的角度分量

// ...other imports
import { formatDate } from "@angular/common";

// ...

//... creating the form
this.form = this.formBuilder.group({
  dateOfReport: [formatDate(new Date(), "yyyy-MM-dd", "en"), [Validators.required]],
  // other form fields
});

【讨论】：