Почему форма не отображает DatePicker? ⇐ Html

[Anonymous]

Я пытаюсь отобразить форму, которая состоит из двух полей: вход и дата. Тем не менее, DatePicker не отображается. Вместо этого я вижу следующее сообщение об ошибке в консоли: < /p>

Ошибка Runtimeerror: NG05100: поставщики из Browsermodule < /code> уже были загружены
. Если вам нужен доступ к общим директивам, таким как
ngif и ngfor import the commonmodule < /code> вместо.

Код: Выделить всё

@Component({
selector: 'app-root',
imports: [
CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FormsModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatDatepickerModule,
MatFormFieldModule,
MatDatepickerModule,
MatNativeDateModule,
],
providers: [
MatDatepickerModule,
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'outline',
},
},
],
template: `











`,
})
export class App {
formBuilder = inject(FormBuilder);

form = this.formBuilder.group({
f1: ['', [Validators.required, Validators.pattern(/^\d{2}$/)]],
f2: [null, Validators.required],
});
}

Live Demo здесь

Подробнее здесь: https://stackoverflow.com/questions/797 ... datepicker