如何在Formly中集成Angular Material日期范围选择器并获取值

你的问题核心是自定义的datepicker-range类型组件没有将选中的日期范围同步到表单模型的range属性中，以下是具体修复步骤：

1. 关联自定义FormGroup与Formly字段的FormControl #

不要创建独立的range FormGroup，而是复用Formly字段自带的formControl，并完成值与模型的同步：

@Component({
  selector: 'app-formly-datepicker-range-type',
  templateUrl: './formly-datepicker-range-type.component.html',
  styleUrls: ['./formly-datepicker-range-type.component.scss'],
})
export class FormlyDatepickerRangeTypeComponent extends FieldType<any> {
  // 将Formly字段的formControl转为包含start/end的FormGroup类型
  range = this.field.formControl as FormGroup<{
    start: FormControl<Date | null>;
    end: FormControl<Date | null>;
  }>;

  ngOnInit() {
    // 初始化日期范围控件，若模型已有值则回显
    this.range.addControl('start', new FormControl(this.field.model?.start || null));
    this.range.addControl('end', new FormControl(this.field.model?.end || null));

    // 监听日期范围变化，同步到表单模型
    this.range.valueChanges.subscribe(value => {
      this.field.model = value;
    });
  }
}

2. 优化模板的通用性与绑定 #

将模板中的标签文本改为从templateOptions读取，同时保持FormGroup绑定：

<mat-form-field class="w-full">
  <mat-label>{{ to.label || 'Rango' }}</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" />
    <input matEndDate formControlName="end" />
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

3. 初始化模型的range属性 #

在使用组件的父组件中，给model的range设置初始空对象，避免未定义：

model: FilterModel = { category: undefined, criteria: '', range: { start: null, end: null } };

修复原理 #

原代码中创建了独立的range FormGroup，完全脱离了Formly的表单控制体系，导致选中值无法同步到外层模型。通过复用field.formControl并监听值变化同步到field.model，就能让日期范围值自动同步到表单模型中。

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