如何设置我的反应式表单日期输入值？

Posted 2023-03-13

【中文标题】如何设置我的反应式表单日期输入值？

【英文标题】：How can I set my reactive form date input value?

【发布时间】：2019-09-03 17:29:04

【问题描述】：

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

this.post.startDate 是 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>

【问题讨论】：

整个表单标签是什么样子的？你能把它和 endDate 输入字段一起发布吗？

@IanP。现在添加

form 标签看起来不错，你从哪里获得 this.post 的值？您是否尝试过手动设置默认值字段，例如 startDate: ['04/12/2019',Validators...]？

@IanP。我从我的 api 中获取它们，问题是我似乎无法设置日期输入的值。我尝试将其设置为“2019 年 4 月 12 日”不起作用

@Jade 看我的回答

【参考方案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（推荐）：

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

第 1 步：

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

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

【讨论】：

不要在属性中使用 ，这是不好的做法！

对于datetime-local 类型的表单输入，将theDate 转换为显示的方式似乎是这样的：formatDate(theDate,'yyyy-MM-ddTHH:mm','en')。区分大小写。

【参考方案2】：

试试内置的 formatDate 包。

import  formatDate  from '@angular/common' 

然后转换您的日期并将其设置为日期选择器控件

this.yourForm.controls.controlName.setValue(formatDate(date,'yyyy-MM-dd','en'));

【讨论】：

尽可能简单成为完美答案。

【参考方案3】：

另一种解决方案，功能多一点的 w 时区偏移，添加绑定和格式转换：

.html:

<form [formGroup]="form">
<input type="date" class="form-control" (change)="onMyDateChange($event)" name="myDate" formControlName="myDate" value=" actualDateFormGroup | date:'yyyy-MM-dd' " >
</form>

.ts:

 actualDateFormGroup = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60000)).toISOString().split("T")[0];

 onMyDateChange(event: any) 
    this.forma.patchValue( myDate: event.target.value );
  

然后可以在代码中根据需要修改myDate变量中获取的格式。

例如：2019-10-13 至 20191013

 stringFormat(string)
  let date = fechaString.replace(/-/g, '');
  return date;
  

finalDate = stringFormat(myDate);

【参考方案4】：

我有这个问题。我的解决方案是：

// another code on constructor ....
this.form = new FormGroup(
  createdDate: new FormControl('', Validators.required),
  expiredDate: new FormControl('', Validators.required),
  // more fields....
);

....

然后，在另一个时刻，我得到了 coupon.createdDate 上的日期值...

    this.form.get('createdDate').setValue(new Date(coupon.createdDate).toISOString().split('T')[0]);

仅此而已。