Angular-Material Datepicker：control.registerOnChange 不是函数

Question

我不明白这个错误。我试图完全按照示例mat-datepicker中所示使用with ，但我无法消除此错误。MomentJS

我的组件代码如下所示：

import { Component,
         Input,
         OnInit }    from '@angular/core';
import { TimeRange, TimeRanges } from "./time-range-selector.constants";
import * as moment from 'moment';
import {FormControl} from "@angular/forms";


@Component({
  selector: 'time-range-selector',
  templateUrl: './time-range-selector.component.html',
  styleUrls: ['./time-range-selector.component.scss']
})
export class TimeRangeSelectorComponent implements OnInit {

  private _timeRange: TimeRange;
  public timeRanges: {} = TimeRanges;


  public startDate: FormControl = new FormControl(moment([2017, 0, 1]));

  public endDate: FormControl = new FormControl(moment([2017, 0, 2]));

  public get selectedTimeRange(): TimeRange {
    return this._timeRange;
  }

  @Input()
  public set selectedTimeRange(range: TimeRange) {
    this._timeRange = range;
  }

  constructor() { }

  ngOnInit() {

  }

}

我的标记是这样的：

<div class="time-range-selector">

  <mat-form-field>
    <mat-select placeholder="Time Range">
      <mat-option *ngFor="let timeRange of timeRanges" [value]="timeRange.value">
        {{ timeRange.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <!-- start date -->
  <mat-form-field *ngIf="true">
    <input matInput [matDatepicker]="startDate" placeholder="Choose a date" [formControl]="startDate">
    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
    <mat-datepicker #startDate></mat-datepicker>
  </mat-form-field>

  <!-- end date -->
  <mat-form-field *ngIf="true">
    <input matInput [matDatepicker]="endDate" placeholder="Choose a date" [formControl]="endDate">
    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
    <mat-datepicker #endDate></mat-datepicker>
  </mat-form-field>


</div>

控制台输出表明错误发生在行开头<input matInput [matDatepicker]="startDate"。

Answer 1

元素的模板变量与绑定<mat-datepicker>具有相同的名称[formControl]，这在尝试创建 FormControl 对象时会导致问题（看起来 Angular 更喜欢模板变量而不是组件中声明的变量）。这解决了您的问题：

<mat-form-field *ngIf="true">
    <input matInput [matDatepicker]="endDatePicker" placeholder="Choose a date" [formControl]="endDate">
    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>