I'm facing two problems with MatDatepicker in Webstorm.
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:
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!
It's a bug, please vote for WEB-56339 to be notified on any progress with it