MatDatepicker is not assignable to parameter type MatDatepicker<Moment>

Question

I'm facing two problems with MatDatepicker in Webstorm.

• Type MatDatepicker is not assignable to type MatDatepickerPanel<MatDatepickerControl<moment.Moment>, moment.Moment | null, moment.Moment>
• Argument type MatDatepicker is not assignable to parameter type MatDatepicker

Even with those 2 problems the application runs and works correctly, but I would like to solve those problems on the IDE to remove those messages. I also check the code on VS Code but there are no error messages there. I tried to reproduce the problem in Stackblitz, but the error is not shown there either:

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

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

My Component:

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();
  }

}

And my module is:

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

Did someone experience this problem that can give me a light?

Thanks!

Answer 1

It's a bug, please vote for WEB-56339 to be notified on any progress with it