0

Estoy tratando de implementar un mat datepicker en mi proyecto y ya he probado casi todos los ejemplos en la documentación de angular material,

pero siempre obtengo este error:

core.js:6498 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'subscribe')
TypeError: Cannot read properties of undefined (reading 'subscribe')
    at new MatDatepickerInputBase (datepicker.js:3041:1)
    at new MatDatepickerInput (datepicker.js:3286:1)
    at NodeInjectorFactory.MatDatepickerInput_Factory [as factory].
¿Alguna idea de cómo solucionar esto?

Entiendo el por qué, porque no está recibiendo una promesa, pero ¿cómo arreglar esto en la implementación?

No estoy segura de si es un problema con el componente matdatepicker o con la variable de plantilla (template variable) utilizada para la referencia al mat-datepicker, ya que cuando elimino [matDatepicker]="picker" (referencia a #picker de , este error desaparece, pero el componente no consigue construirse correctamente.

Gracias

Carlota

3
  • Es interesante tu pregunta pero si no compartís código de tus modulos si tu aplicación tiene varios? o tus componentes tiene varios? difícil responderte por favor modifica tu pregunta brindando mas datos .tengo un borrador sobre el tema en github.com/nestdanchia/add
    – nestdan
    Commented el 7 abr. 2022 a las 14:38
  • porque hasta puede ser un error de tipeo forma correcta --><mat-datepicker-toggle matSuffix [for]="mydateB"></mat-datepicker-toggle> <mat-datepicker #mydateB>
    – nestdan
    Commented el 7 abr. 2022 a las 15:05
  • En este caso no añado código porque hago literlamente copiar pegar del código de la documentación de angular-material. Por eso creo que es un problema de esta plantilla de angular (que ha sido heredada de otro proyecto), al parecer cada vez que pongo variables de plantilla (#miId) en las tags de html da un error parecido, por eso quería saber si se puede controlar este tipo de subscripciones en el angular-material entre componentes del material (en este caso del input del datepicker y el toggle) para que se escuchen un al otro sin usar el #miDatePicker.
    – CBD
    Commented el 19 abr. 2022 a las 7:02

1 respuesta 1

1

La relacion entre el matInput el elemento modal y el toogle da error si no están implementados correctamente los módulos que requiere DatePicker En el tutorial no indican directamente que modulos se requieren angular.io La directiva [matDatepicker] constructor(elementRef: ElementRef<HTMLInputElement>, dateAdapter: DateAdapter<D>, dateFormats: MatDateFormats, _formField?: MatFormField | undefined); vincula al input con el elemento modal este no se muestra por default lo vinculamos a un toggle button para mostrarlo o cerrarlo todo esto es una estructura predeterminada que requiere de los modulos necesarios para actuar

// ng g m angular-material --module=app
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ]
})
export class AngularMaterialModule { }
// exportamos
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material/angular-material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
   // FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }
//componente
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 
  myDate = new FormControl(new Date());
}
<mat-form-field>
  <input matInput [matDatepicker]="pickeryear" 
  placeholder="Choose a date" [formControl]="myDate">
  <mat-datepicker-toggle  [for]="pickeryear">
  </mat-datepicker-toggle>
  <mat-datepicker #pickeryear startView="year"></mat-datepicker>
</mat-form-field>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.