Angular 15中[(ngModel)]绑定Date类型Input无法显示预设日期

问题核心：HTML的type="date"输入框仅接受ISO 8601格式的字符串（yyyy-MM-dd），你直接绑定的原生Date对象无法被输入框识别，导致显示为空；而文本展示用了Angular的date管道，会自动将Date对象转为指定格式的字符串，所以能正常显示。

以下是几种可行的解决方法：

方法1：初始化时直接转换为符合格式的字符串 #

修改组件代码，将Date对象转换为yyyy-MM-dd格式的字符串后再赋值：

// 新增日期格式化工具函数
private formatDateToISO(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

defaultOpening: Opening = new Opening(
  1, 
  this.formatDateToISO(new Date()), 
  this.formatDateToISO(new Date())
);

ngOnInit() {
  this.HotelModel.openings.push(this.defaultOpening);
}

注意：需要将Opening类中的start和end字段类型改为string，以匹配输入框的双向绑定数据类型。

方法2：使用Angular DatePipe转换 #

通过注入DatePipe在组件内完成日期格式化：

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe) {}

defaultOpening: Opening;

ngOnInit() {
  const today = new Date();
  const formattedStart = this.datePipe.transform(today, 'yyyy-MM-dd');
  const formattedEnd = this.datePipe.transform(today, 'yyyy-MM-dd');
  
  this.defaultOpening = new Opening(1, formattedStart, formattedEnd);
  this.HotelModel.openings.push(this.defaultOpening);
}

同样需要确保Opening类的start和end字段为string类型。

方法3：自定义双向绑定组件（保留Date类型） #

如果不想修改Opening类的字段类型，可自定义一个封装原生日期输入框的组件，实现双向绑定的类型转换：

1. 创建自定义日期输入组件 #

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-date-input',
  template: `<input type="date" [value]="formattedDate" (input)="handleInput($event.target.value)">`,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DateInputComponent),
    multi: true
  }]
})
export class DateInputComponent implements ControlValueAccessor {
  formattedDate: string;

  private onChange: (value: Date) => void;
  private onTouched: () => void;

  writeValue(value: Date): void {
    if (value) {
      this.formattedDate = value.toISOString().split('T')[0];
    }
  }

  registerOnChange(fn: (value: Date) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  handleInput(value: string): void {
    const dateValue = value ? new Date(value) : null;
    this.onChange(dateValue);
    this.onTouched();
  }
}

2. 在模板中使用自定义组件 #

<tr *ngFor="let opening of HotelModel.openings; let i = index">
  <td><app-date-input [(ngModel)]="opening.start"></app-date-input></td>
  <td><app-date-input [(ngModel)]="opening.end"></app-date-input></td>
</tr>

这种方式可以保持Opening类的start和end为Date类型，同时实现输入框的正常显示与双向绑定。

内容的提问来源于stack exchange，提问作者Mauro Ghiglia