如何设置我的反应性表格日期输入值? [英] How can I set my reactive form date input value?

问题描述

因此，我试图显示此日期作为输入.但是在我的表单构建器组中设置它的值时未显示.我也希望能够对其进行格式化.

So I am trying to display this date for an input. But it's not displaying when setting the value of it in my form builder group. I would also like to be able to format it too.

this.post.startDate的类型为日期

this.post.startDate is of type Date

.ts中的内容

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

我的反应形式有这个

<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>

推荐答案

您可以通过两种方法将日期设置为默认值.

You have two possibilities to set you date as default value.

变种1:

要将默认日期值设置为类型为date的< input> 标签，您应该使用input-tag的HTML属性 value .

For setting default date value to <input> tag with type date you should use HTML-property value of input-tag.

示例:

<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().

You can use an built-in function formatDate() in angular.

第1步:

从 @ angular/common 中导入 formatDate()到组件打字稿文件中.

Import formatDate() from @angular/common in you component typescript file.

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

注意: formatDate(您的日期，格式，语言环境)需要3-4个参数.

Note: formatDate(yourDate, format, locale) expects 3-4 parameters.

第2步:

在表单组的定义中设置日期格式.

Format your dates in definition of your form group.

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/zh-CN/docs/Web/HTML/Element/input/date

Here is documentation of input type date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

这篇关于如何设置我的反应性表格日期输入值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！