Angular5表单输入框无法显示预设值问题咨询

我之前在Angular项目里也遇到过一模一样的问题！你现在的写法里，[(ngModel)]的优先级比input的value属性高太多了——因为双向绑定会完全接管输入框的值，所以你设置的value="{{today | date:'dd/MM/yyyy'}}"根本不会生效，毕竟你的alumno.fechainscripcion是null，输入框只会同步这个绑定值，自然就显示为空了。

方案一：直接初始化alumno.fechainscripcion为预设日期 #

这是最稳妥的方式，从组件层面就把默认值设置好，不需要在HTML里做额外处理：

方法1：使用Angular的DatePipe格式化日期 #

首先在组件里导入并注入DatePipe：

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Alumno } from './你的-alumno-model路径';

@Component({
  providers: [DatePipe],
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  today: number;
  title: string;
  alumno: Alumno;

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    this.today = Date.now();
    this.title = 'Añadir';
    // 格式化日期为dd/MM/yyyy格式
    const formattedDate = this.datePipe.transform(this.today, 'dd/MM/yyyy');
    // 初始化alumno时把fechainscripcion设为格式化后的日期
    this.alumno = new Alumno('','','','','','',formattedDate,'','','Alta');
  }
}

然后修改HTML，去掉多余的value属性：

<input type="text" name="fechainscripcion" #fechainscripcion="ngModel" [(ngModel)]="alumno.fechainscripcion" class="form-control" />

方法2：手动格式化日期（无需依赖DatePipe） #

如果你不想用Angular的管道，也可以手动处理日期格式：

ngOnInit(): void {
  this.today = Date.now();
  this.title = 'Añadir';
  const date = new Date(this.today);
  // 手动拼接成dd/MM/yyyy格式，注意月份要+1，并且补零
  const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`;
  this.alumno = new Alumno('','','','','','',formattedDate,'','','Alta');
}

HTML同样只保留ngModel绑定即可。

方案二：在HTML中用三元表达式处理默认值 #

如果不想修改组件的初始化逻辑，也可以直接在模板里判断，当alumno.fechainscripcion为null时显示预设日期：

<input type="text" name="fechainscripcion" #fechainscripcion="ngModel" [(ngModel)]="alumno.fechainscripcion || (today | date:'dd/MM/yyyy')" class="form-control" />

这种方式的好处是，当用户修改输入框内容后，alumno.fechainscripcion会被赋值，之后就会一直显示用户输入的值，不会再回到预设日期，完全符合需求。

两种方案都能解决你的问题，推荐用方案一，因为把数据逻辑放在组件里会更清晰，也更符合Angular的最佳实践。

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