Angular Material Datepicker min 和 max 不起作用：类型“日期”不可分配给类型“数字”

Question

我在 Angular 11 中使用材料日期选择器（具体版本见下文），但我在使用最小/最大属性时遇到了问题。

my-component.component.html

<form [formGroup]="form">
    <mat-form-field>
        <mat-label>Date</mat-label>
        <input [matDatepicker]="picker"
          [max]="maxDate"
          [min]="minDate"
          formControlName="date"
          matInput>
        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</form>

my-component.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponent implements OnInit {

  minDate = new Date();
  maxDate = new Date();
  form!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.createForm();
  }

  private createForm(): FormGroup {
    return this.formBuilder.group({
      date: [],
    });
  }

我的问题是，当我运行 ng serve 时，我的 IDE (Webstorm 2020.03) 显示以下错误：

Error: src/app/my-component.component.html:197:55 - error TS2322: Type 'Date' is not assignable to type 'number'.
    
    4                       <input [matDatepicker]="picker" [max]="minDate"
                                                              ~~~~~~~~~~~~~~~
    
      src/app/my-component.component.ts.ts:18:16
        5   templateUrl: './my-component.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component MyComponent.
    src/app/my-component.component.html:198:30 - error TS2322: Type 'Date' is not assignable to type 'number'.
    
    5                              [min]="minDate"
                                     ~~~~~~~~~~~~~~~
    
      src/app/my-component.component.ts.ts:18:16
        5   templateUrl: './my-component.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component MyComponent.

如果我删除 [max]="maxDate" [min]="minDate" 或 formControlName="date"，我可以为应用程序提供服务而不会出现任何错误。然后，如果我再次添加它，IDE 会显示错误，但一切都按预期工作。 当我删除formControlName="date" 时，最小/最大属性可以正常工作，但该值不是表单中设置的日期。 我尝试将minDate 和maxDate 设置为new Date().getTime()。这解决了编译器问题，但 min/max 属性不再起作用。

这些是我正在使用的模块：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MyComponent} from './my-component.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {ReactiveFormsModule} from '@angular/forms';
import {CustomFormsModule} from 'ng2-validation';



@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    CustomFormsModule,
  ],
})
export class MyModule {
}

版本：

Angular CLI: 11.0.6
Node: 14.15.3
OS: win32 x64

Angular: 11.0.8
... common, compiler, compiler-cli, core, forms, localize
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/animations             11.0.9
@angular/cdk                    11.1.2
@angular/cli                    11.0.6
@angular/material               11.1.2
@schematics/angular             11.0.6
@schematics/update              0.1100.6
rxjs                            6.6.3
typescript                      4.0.5

我怎样才能让它工作而不会出现任何错误？

更新：我在 stackblitz 上创建了一个应用程序：https://stackblitz.com/edit/angular-datepicker-min-max-error?file=src/app/datepicker-min-max-example.html 但是，即使我下载并在 Webstorm 中运行它，该简化版本也不会出现问题。 我认为，这里发生的事情是使用了来自 node_modules/@angular/forms/forms.d.ts 而不是 node_modules/@angular/material/datepicker/date-range-input.d.ts 的 min 和 max 指令。他们都有相同的名字。

Answer 1

我找到了罪魁祸首。仅当我从模块中的 'ng2-validation' 导入 CustomFormsModule 时，才会出现问题。 一旦我删除它，就会使用正确的 min/max 指令并且不再显示错误。

Answer 2

您可以将值传递给您分配的日期吗？比如：

 minDate = new Date(2000, 0, 1);
 maxDate = new Date(2020, 0, 1);

我希望这会有所帮助。谢谢。