Angular中如何为响应式表单控件设置dd/mm/yyyy日期格式

原生HTML <input type="date"> 的显示格式由浏览器系统区域设置决定，且仅支持将ISO格式（yyyy-MM-dd）作为控件值，无法直接通过Angular的DatePipe修改显示格式。以下两种方案可实现强制dd/mm/yyyy格式的日期输入：

方案1：自定义指令处理格式转换（原生输入框） #

通过自定义指令实现视图（dd/mm/yyyy）与表单模型（ISO格式）的双向转换：

步骤1：创建自定义指令 #

import { Directive, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appDateInputFormatter]'
})
export class DateInputFormatterDirective {
  constructor(
    private el: ElementRef,
    private control: NgControl
  ) {}

  // 将模型的ISO日期转为dd/mm/yyyy显示
  @HostListener('ngModelChange', ['$event'])
  onModelChange(event: string): void {
    if (!event) return;
    const date = new Date(event);
    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    this.el.nativeElement.value = `${day}/${month}/${date.getFullYear()}`;
  }

  // 将输入的dd/mm/yyyy转为ISO格式存入模型
  @HostListener('blur')
  onBlur(): void {
    const value = this.el.nativeElement.value.trim();
    if (!value) return;
    
    const [day, month, year] = value.split('/');
    if (!day || !month || !year) return;

    const isoDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
    this.control.control?.setValue(isoDate);
  }
}

步骤2：在模块中声明指令 #

import { DateInputFormatterDirective } from './date-input-formatter.directive';

@NgModule({
  declarations: [
    // 其他组件/指令
    DateInputFormatterDirective
  ]
})
export class AppModule {}

步骤3：修改组件与模板 #

修正表单初始化逻辑，为FormArray添加空控件：

ngOnInit(): void {
  this.loginForm = this.formBuilder.group({
    requestdate: this.formBuilder.array(
      Array(3).fill(null).map(() => this.formBuilder.control(''))
    )
  });
}

修改HTML模板，改用文本输入框并添加自定义指令：

<form [formGroup]="loginForm">
  <div *ngFor="let control of requestDatesArray.controls; let i = index">
    <label formArrayName="requestdate">
      <input 
        type="text" 
        class="form-control" 
        [formControlName]="i" 
        appDateInputFormatter
        placeholder="dd/mm/yyyy"
      />
    </label>
  </div>
</form>

方案2：使用Angular Material Datepicker（推荐） #

借助Angular Material的日期选择器组件，可快速配置dd/mm/yyyy格式，无需手动处理转换逻辑：

步骤1：安装并导入Material模块 #

ng add @angular/material

在模块中导入相关依赖：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块
    ReactiveFormsModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class AppModule {}

步骤2：配置日期格式 #

在组件中自定义日期格式：

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

// 自定义日期格式配置
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppComponent {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      requestdate: this.formBuilder.array(
        Array(3).fill(null).map(() => this.formBuilder.control(''))
      )
    });
  }

  get requestDatesArray(): FormArray {
    return this.loginForm.controls['requestdate'] as FormArray;
  }
}

步骤3：修改HTML模板 #

<form [formGroup]="loginForm">
  <div *ngFor="let control of requestDatesArray.controls; let i = index">
    <label formArrayName="requestdate">
      <input 
        matInput 
        [matDatepicker]="picker" 
        class="form-control" 
        [formControlName]="i" 
        placeholder="dd/mm/yyyy"
      />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </label>
  </div>
</form>

内容的提问来源于stack exchange，提问作者Shashank S Chandel