问题描述
所以我试图为输入显示这个日期.但是在我的表单构建器组中设置它的值时它没有显示.我也希望能够对其进行格式化.
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
这篇关于如何设置我的反应式日期输入值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!