Question

我不明白这个错误。我正在尝试使用mat-datepicker与MomentJS完全一样，the examples，但我无法摆脱这个错误。

我的组件代码如下所示：

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]绑定具有相同的名称，这会导致问题（看起来Angular偏爱模板变量而不是组件中声明的变量）创建FormControl对象。这可以解决您的问题：

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

Answer 2

错误源自您的CREATE OR REPLACE FUNCTION get_users_list() RETURNS TABLE ( id INTEGER, name VARCHAR, surname VARCHAR, fkrole INTEGER, username VARCHAR ) as $$ BEGIN RETURN QUERY SELECT users.id, users.name, users.surname, users.fkrole, users.username FROM users; END; $$ LANGUAGE plpgsql;和[matDatepicker] = "startDate"。引用具有相同FormControl名称的日期选择器是一个问题。将您的代码更新为以下内容。

[matDatepicker] = "endDate"

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

2 个答案: