Angular 5中Angular Material Date Picker无法动态命名求助

我之前也踩过类似的Angular Material日期选择器动态生成的坑，你遇到的this._datepicker._registerInput is not a function错误，本质是动态生成时日期选择器实例和输入框没有正确关联，导致Angular无法找到对应的注册方法。下面是具体的解决思路和实现方案：

1. 放弃动态模板引用变量，改用数组存储DatePicker实例 #

Angular的模板引用变量（比如#picker）是静态的，不能通过#{{dynamicName}}这种方式动态生成，这是导致错误的核心原因。我们可以用数组来管理每个动态生成的DatePicker实例：

组件类中定义数组 #

import { MatDatepicker } from '@angular/material/datepicker';
import { FormGroup, FormControl } from '@angular/forms';

// 存储所有动态生成的日期选择器实例
datePickerInstances: MatDatepicker<any>[] = [];
// 假设你的动态字段配置是这样的（可根据实际业务调整）
dynamicFields = [
  { dynamicName: 'startDate', dynamicLabel: '开始日期' },
  { dynamicName: 'endDate', dynamicLabel: '结束日期' }
];
// 表单Group实例
searchForm: FormGroup;

ngOnInit() {
  // 初始化表单控件，确保每个dynamicName对应的控件已注册到表单中
  const formControls: {[key: string]: FormControl} = {};
  this.dynamicFields.forEach(field => {
    formControls[field.dynamicName] = new FormControl(null);
  });
  this.searchForm = new FormGroup(formControls);
}

模板中关联实例与输入框 #

利用initialized事件把每个DatePicker实例存入数组，再绑定到输入框的matDatepicker属性：

<form [formGroup]="searchForm">
  <mat-form-field *ngFor="let field of dynamicFields; let i = index">
    <input 
      matInput 
      [matDatepicker]="datePickerInstances[i]" 
      [formControlName]="field.dynamicName"
      placeholder="{{field.dynamicLabel}}"
    >
    <mat-datepicker-toggle matSuffix [for]="datePickerInstances[i]"></mat-datepicker-toggle>
    <mat-datepicker 
      #picker 
      (initialized)="datePickerInstances[i] = picker"
    ></mat-datepicker>
  </mat-form-field>
</form>

2. 检查模块导入是否完整 #

确保你的AppModule或对应功能模块中已经导入了所有必要的Material模块，缺失模块也可能引发关联错误：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'; // 原生日期适配器

@NgModule({
  imports: [
    // ...其他必要模块
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class YourFeatureModule { }

3. 验证表单控件的动态注册 #

确保每个dynamicName对应的FormControl已经正确添加到FormGroup中，这是表单控件能正常工作的基础，缺失的话也可能引发关联错误。

按照这个方式调整后，动态生成的日期选择器就能正确关联输入框，不会再出现_registerInput的错误了。

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