MatDatepicker 不可分配给参数类型 MatDatepicker<Moment>

Question

我在 Webstorm 中遇到 MatDatepicker 的两个问题。

• MatDatepicker 类型不可分配给类型 MatDatepickerPanel，时刻.Moment | null, moment.Moment>
• 参数类型 MatDatepicker 不可分配给参数类型 MatDatepicker

即使存在这两个问题，应用程序也可以正常运行和工作，但我想在 IDE 上解决这些问题以删除这些消息。我还在 VS Code 上检查了代码，但那里没有错误消息。我尝试在 Stackblitz 中重现该问题，但错误也没有显示在那里：

https://stackblitz.com/edit/angular-bfg4m5?file=src%2Fapp%2Fdatepicker-views-selection-example.ts,src%2Fapp%2Fdatepicker-views-selection-example.html

我的 HTML：

<mat-form-field data-automation-id="inputs-form-field-input-on-primary-bg" appearance="legacy">
      <mat-label>{{'ununterbrochener Besitz seit'}}</mat-label>
      <input matInput [matDatepicker]="picker"  [max]="maxYear" formControlName="validFrom"/>
      <mat-hint>MM.YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="picker" id="validFromPicker"></mat-datepicker-toggle>
      <mat-datepicker #picker
        startView="multi-year"
        (monthSelected)="setMonthAndYear($event, picker)">
      </mat-datepicker>

      <mat-error *ngIf="checkError('validFrom','required')">
        {{'vkb.insurance.data.entry.error.required'}}
      </mat-error>
      <mat-error *ngIf="checkError('validFrom','matDatepickerParse')">
        {{'vkb.insurance.data.entry.error.pattern'}}
      </mat-error>
      <mat-error *ngIf="checkError('validFrom','matDatepickerMax')">
        {{'vkb.insurance.data.entry.error.maxperiod'}}
      </mat-error>
    </mat-form-field>

我的组件：

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {Customer} from '../../core/models/customer.model';
import moment, { Moment } from 'moment';
import {SharingDataService} from '../../shared/services/sharing-data.service';
import {MatDatepicker} from '@angular/material/datepicker';

@Component({
  selector: 'app-new-beneficiary',
  templateUrl: './new-beneficiary.component.html',
  styleUrls: ['./new-beneficiary.component.scss']
})
export class NewBeneficiaryComponent implements OnInit {

 customerData: Customer = {};
 currentPolicyholderForm: FormGroup;
 submitted = false;
 maxYear = moment();

  constructor(private readonly router: Router,
          private readonly sharingDataService: SharingDataService) {
          this.currentPolicyholderForm = new FormGroup({
       validFrom: new FormControl('', Validators.required)
       }, {});
  }

  ngOnInit(): void {
      this.setValuesOnFormControls();
  }

  private setValuesOnFormControls(): void {
    this.customerData = this.sharingDataService.client;

    if (this.currentPolicyholderForm && this.customerData) {
        this.currentPolicyholderForm.controls['validFrom']
        .setValue(moment(this.customerData.validFrom));
    }
  }

  public checkError = (controlName: string, errorName: string) => {
    return this.currentPolicyholderForm.controls[controlName].hasError(errorName);
  };

  setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.currentPolicyholderForm.controls['validFrom'].value!;
    ctrlValue.month(normalizedMonthAndYear.month());
    ctrlValue.year(normalizedMonthAndYear.year());
    this.currentPolicyholderForm.controls['validFrom'].setValue(ctrlValue);
    datepicker.close();
  }

}

我的模块是：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import {NewBeneficiaryComponent} from './new-beneficiary.component';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {OldBeneficiaryModule} from '../old-beneficiary/old-beneficiary.module';
import {TranslateModule} from '@ngx-translate/core';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MomentDateAdapter, MomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from 
'@angular/material-moment-adapter';
import {MONTH_YEAR_FORMAT} from '../../shared/formats/month-date-format';

@NgModule({
  declarations: [NewBeneficiaryComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: '', component: NewBeneficiaryComponent}
    ]),
    TranslateModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    OldBeneficiaryModule,
    MatDatepickerModule,
    MomentDateModule
  ],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, 
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    {provide: MAT_DATE_FORMATS, useValue: MONTH_YEAR_FORMAT}
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NewBeneficiaryModule {}

有人遇到过这个问题可以给我启发吗？

谢谢！

Answer 1

这是一个错误，请投票给 WEB-56339 以获得任何进展通知

Answer 2

这个问题仍然存在，是否计划修复？有解决方法吗？

问候

Answer 3

我回复自己:)这个解决方法似乎有效：$any(...)

<mat-datepicker-toggle matIconSuffix [for]="$any(pickerfoobar)" [class]="errorClassForDate"></mat-datepicker-toggle>