Angular-Material Datepicker: control.registerOnChange is not a function

Question

I don't understand this error. I'm trying to use the mat-datepicker with MomentJS exactly as shown in the examples, but I cannot get rid of this error.

My component code looks like this:

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() {

  }

}

and my markup like this:

<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>

The console output says the error occurs at the line beginning <input matInput [matDatepicker]="startDate".

p4r1 · Accepted Answer · 2018-03-20 16:15:12Z

5

Your template variables for the <mat-datepicker> elements have the same name as the [formControl] bindings, which is causing issues (it looks like Angular favors the template variable over a variable declared in the component) when attempting to create a FormControl object. This fixes your issue:

<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>

answered Mar 20, 2018 at 16:15

p4r1

2,6701 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Narm · Accepted Answer · 2018-03-20 16:17:18Z

The error is derived from your [matDatepicker] = "startDate" and [matDatepicker] = "endDate". Referencing the date picker with the same name of the FormControl is an issue. Update your code to something like the following.

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

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

Collectives™ on Stack Overflow

Angular-Material Datepicker: control.registerOnChange is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related