所以我试图显示这个输入日期。但是在我的表单构建器组中设置它的值时它没有显示。我也希望能够对其进行格式化。
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>
最佳答案
您有两种可能将您的日期设置为默认值。
变体 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
关于angular - 如何设置我的响应式(Reactive)表格日期输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55660262/