Angular Material：将MatDatePicker选中日期设为单选按钮值的简便方法

嘿，我刚好有几个更简洁的方案可以帮你简化代码，不用再单独绑定dateChange和dateInput两个事件啦！

方案1：利用FormControl的valueChanges自动同步 #

核心思路是给日期输入框单独加一个FormControl，通过监听它的valueChanges自动格式化日期并同步到radio group的表单控件里，代码会更整洁。

模板代码

<mat-radio-group formControlName="installType">
  <mat-radio-button value="immediate">立即安装</mat-radio-button>
  <mat-radio-button>
    选择日期：
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [formControl]="datePickerControl">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </mat-radio-button>
</mat-radio-group>

TypeScript代码

import { FormGroup, FormControl } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { map } from 'rxjs';

// 组件内定义
datePickerControl = new FormControl<Date | null>(null);
installForm = new FormGroup({
  installType: new FormControl('')
});

constructor(private datePipe: DatePipe) {}

ngOnInit() {
  // 监听日期控件变化，自动格式化并同步到radio group的表单值
  this.datePickerControl.valueChanges.pipe(
    map(date => date ? this.datePipe.transform(date, 'dd/MM/yyyy') : null)
  ).subscribe(formattedDate => {
    if (formattedDate) {
      this.installForm.get('installType')?.setValue(formattedDate);
    }
  });
}

这个方案只需要一次监听，就能替代原来两个事件的绑定逻辑，而且代码逻辑更清晰。

方案2：模板内直接用管道格式化（更轻量化） #

如果你的场景不需要额外的逻辑处理，也可以直接在模板里用date管道格式化日期，配合单选按钮的[value]绑定：

<mat-radio-group formControlName="installType">
  <mat-radio-button value="immediate">立即安装</mat-radio-button>
  <mat-radio-button [value]="datePickerControl.value | date:'dd/MM/yyyy'">
    选择日期：
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [formControl]="datePickerControl">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </mat-radio-button>
</mat-radio-group>

TS里只需要定义datePickerControl即可，甚至不需要额外的订阅逻辑——单选按钮的value会随着日期控件的值自动更新，同时同步到installType表单控件里。

小提醒 #

记得确保你的模块已经导入了DatePipe（Angular 14+可以直接注入，低版本需要在模块的providers数组里添加）。

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