如何设置我的反应式日期输入值? [英] 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 是 Date 类型

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:

要将默认日期值设置为类型为日期的 标记，您应该使用输入标记的 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(推荐):

您可以在 angular 中使用内置函数 formatDate().

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

第一步:

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

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

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

注意:formatDate(yourDate, format, locale) 需要 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/en-US/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屋！