angular - 如何设置我的响应式(Reactive)表格日期输入值？

Question

所以我试图显示这个输入日期。但是在我的表单构建器组中设置它的值时它没有显示。我也希望能够对其进行格式化。

this.post.startDate 是日期类型

.ts 中的内容

this.editForm = this.formBuilder.group({
      startDate: [this.post.startDate, Validators.compose([Validators.required])],
      endDate: [this.post.endDate, Validators.compose([Validators.required])]
    });

我的 react 形式有这个

<form [formGroup]="editForm" (ngSubmit)="saveDate()">

        <label>Start Date: </label>
        <input type="date" formControlName="startDate" name="startDate" />

        <br />
        <label>End Date: </label>
        <input type="date" formControlName="endDate" name="endDate" />

        <br /><br />
        <input type="submit" value="Create Date">

      </form>

Answer 1

您有两种可能将您的日期设置为默认值。

变体 1:

用于将默认日期值设置为 <input>带有日期类型的标签，你应该使用 HTML 属性 value输入标签。

例子:

<form [formGroup]="editForm2">
    <input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
    <input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>

变体 2(推荐):

您可以使用内置函数 formatDate() Angular 。

第 1 步:

进口formatDate()来自 @angular/common在你的组件 typescript 文件中。

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

备注:formatDate(yourDate, format, locale)需要 3-4 个参数。

第 2 步:

在表单组的定义中格式化日期。

this.editForm = this.formBuilder.group({
      startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
      endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});

这是工作示例:https://stackblitz.com/edit/angular-kucypd

这是输入类型日期的文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date