为日期类型分配默认值答案

【问题标题】：Assign default value for a date type为日期类型分配默认值
【发布时间】：2021-09-02 14:09:44
【问题描述】：

我使用 angular 10。我有一个带有日期输入的模式。我想指定今天的日期。

在一个组件中，我有

  addEventForm: FormGroup;
  addEventFormInitialValues = {
      eventType: ['', Validators.required],
      eventDate: ['', Validators.required]
  };

在我尝试过的构造函数中

  this.addEventFormInitialValues.eventDate = this.datepipe.transform(new Date(), 'yyyy-MM-dd');

我收到此错误

错误 TS2322：类型 'string' 不可分配给类型 '(string | ((control: AbstractControl) => ValidationErrors))[]'.

我也试过

eventDate: [new Date(), Validators.required]

我没有收到错误，但我没有显示任何默认日期

<div class="form-group row">
    <label for="eventDate" class="col-sm-3 col-form-label">{{'addEvent.eventDate' | translate}}</label>
    <div class="col-sm-3 self-center">
        <input type='date' id="eventDate" formControlName="eventDate"/>
        <p class="no-bottom-margin">
                <app-form-validation-hint *ngIf="addEventSubmitted && eventAddForm.eventDate.errors && eventAddForm.eventDate.errors.required"></app-form-validation-hint>
        </p>
    </div>
 </div>

【问题讨论】：

标签： angular

【解决方案1】：

带有type=date 的input 元素期望值是valid date string，格式为yyyy-mm-dd。所以这会起作用：

addEventFormInitialValues = {
    eventType: ['', Validators.required],
    eventDate: [
      '2021-09-02',
      Validators.required
    ]
  };

但显然直接处理字符串格式的日期不是很方便。您可以查看 this answer 了解如何将 JS Date 格式化为 yyyy-mm-dd，但如果您希望您的应用程序在日期上做的不仅仅是琐碎的操作，我建议您采用诸如 date-fns 之类的库。

话虽如此，请注意 Angular 没有内置 ValueAccessor 用于日期输入。当你写这个时：

eventDate: [new Date(), Validators.required]

您的 Angular 表单控件确实获得了默认值。关键是，该值没有被转码为适合input 元素的格式，这就是您在那里看不到它的原因。保持模型日期格式和显示日期格式同步可能需要自定义 ValueAccessor。

【讨论】：

【解决方案2】：

你应该使用格式：'yyyy-MM-dd'

示例：https://stackblitz.com/edit/angular-ivy-rtp8xl?file=src/app/reactive-form-dates-example.component.ts

【讨论】：