Question

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

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])]
    });

我的反应形式有这个

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

Answer 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（推荐）：

您可以在角度中使用内置功能formatDate()。

步骤1：

将fromatDate()中的@angular/common导入到组件打字稿文件中。

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

Answer 2

另一种解决方案，在时区偏移量上增加了一些功能，增加了绑定和格式转换：

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

Answer 3

尝试使用内置的 formatDate 包。

import { formatDate } from '@angular/common'

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

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

如何设置我的反应性表格日期输入值？

3 个答案: