senden Daten an mdDatepicker von Angular Material mit Patchvalue

Question

in meinem Vollstack-Projekt Ich brauche update de Datum in einer formulary, dafür benutze ich ein Formular für Daten aus der Datenbank und setzen Sie die Eingaben mit dem ursprünglichen Wert aus der Datenbank. Das Problem ist, wenn ich versuche, die Eingabe von mdDatepicker ich weiß nicht, was ich falsch mache. Dies ist der Fehler

Fehler: Datepicker: Wert nicht als Date-Objekt von DateAdapter erkannt.

Backend: NodeJS Datenbank: mysql vorne: Winkel 4

Klasse

export class Empresa { 
    constructor(
     public NUM_ID_EMPRESA: number, 
     public STR_IDENTIFICACION: number, 
     public STR_TIPO_IDENTIFICACION: number, 
     public STR_NOMBRE: string, 
     public createdAt: string 
    ) {} 
} 

dies die Kontrollen für die Bearbeitung sind die Formelsammlung

createControlsEdit() { 
    this.form = this.fb.group({  
     NUM_ID_EMPRESA: '', 
     STR_NOMBRE: ['', Validators.compose([Validators.required])], 
     STR_TIPO_IDENTIFICACION: ['', Validators.compose([Validators.required])], 
     STR_IDENTIFICACION: ['', Validators.compose([Validators.required, Validators.pattern(validaNum)])], 
     createdAt: '' // this is the control for date 
    }) 
    } 

dies mein patchvalue für die ist formulary

this.service.getEmpresa(id) 
     .subscribe(
      rs => this.empresa = rs, 
      er => console.log('Error:', er), 
      () => { 
      if (this.empresa.length > 0) {     
       this.esEdicion = true;      
       this.form.patchValue({     
       NUM_ID_EMPRESA: this.empresa[0].NUM_ID_EMPRESA, 
       STR_NOMBRE: this.empresa[0].STR_NOMBRE, 
       STR_TIPO_IDENTIFICACION: this.empresa[0].STR_TIPO_IDENTIFICACION, 
       STR_IDENTIFICACION: this.empresa[0].STR_IDENTIFICACION, 
       createdAt: this.empresa[0].createdAt // here recieve data from model 
       }) 
      } 
      } 
     ) 
    } 

und dies ist mein HTML-Ansicht für mdDatePicker

<div class="form-group"> 
    <md-form-field> 
     <input id="createdAt" formControlName="createdAt" mdInput [mdDatepicker]="picker" (click)="picker.open()" placeholder="Elija una fecha"> 
      <md-datepicker-toggle mdPrefix [for]="picker" ></md-datepicker-toggle> 
      <md-datepicker #picker></md-datepicker> 
     </md-form-field> 
</div> 

dank

Answer 1

Der Schlüssel, den Sie auf das Datum Formcontrol im patchValue Anruf beziehen sich verwenden, um einen zusätzlichen ‚d‘ createdAtd: statt createdAt:. Ist das das Problem?

EDIT

Mit Bezug auf this issue berichtet, ist es wahrscheinlich aufgrund der Datumsauswahl ein String-Wert anstelle eines echten Date-Objekt zugeordnet ist. Sie können den Anfangswert des Datumssteuerelements null anstelle von '' zuweisen (möglicherweise ist dies nicht wirklich wichtig, aber nicht sicher). Wenn Sie einen neuen Wert für dieses Steuerelement festlegen, stellen Sie immer sicher, dass es ein echtes Date-Objekt ist (entweder mit Hilfe von Javascript Date Bibliothek oder mit momentjs.

So in Ihrem Beispiel, könnten Sie versuchen, diese Änderungen vornehmen,

createControlsEdit() { 
    this.form = this.fb.group({  
     NUM_ID_EMPRESA: '', 
     STR_NOMBRE: ['', Validators.compose([Validators.required])], 
     STR_TIPO_IDENTIFICACION: ['', Validators.compose([Validators.required])], 
     STR_IDENTIFICACION: ['', Validators.compose([Validators.required, Validators.pattern(validaNum)])], 
     createdAt: null // this is the control for date (setting to null) 
    }) 
    } 

this.service.getEmpresa(id) 
     .subscribe(
      rs => this.empresa = rs, 
      er => console.log('Error:', er), 
      () => { 
      if (this.empresa.length > 0) {     
       this.esEdicion = true; 

       // assuming your date format is 'yyyy-mm-dd', if different change this logic 
       const str = this.empresa[0].createdAt.split('-'); 
       const dateObj = new Date(+str[0], +str[1] - 1, +str[2]); // doing 'month - 1' as it is zero-based 

       this.form.patchValue({     
       NUM_ID_EMPRESA: this.empresa[0].NUM_ID_EMPRESA, 
       STR_NOMBRE: this.empresa[0].STR_NOMBRE, 
       STR_TIPO_IDENTIFICACION: this.empresa[0].STR_TIPO_IDENTIFICACION, 
       STR_IDENTIFICACION: this.empresa[0].STR_IDENTIFICACION, 
       createdAt: dateObj // use the Date obj created above 
       }) 
      } 
      } 
     ) 
    } 

Sie wahrscheinlich sicherstellen müssen, wenn Sie diesen Wert aktualisieren später in Ihrer Anwendung, von einem gültigen Date-Typ anstelle von nur einer Zeichenfolge zu sein. Hoffen, dass es hilft.