MD-DatePickerの+反応性フォーム+ firebase + 4

Question

角度私が持っている：私のサービスで

export class Carico { 
    $key: string; 
    dataCarico: Date; 
    riferimentoCarico: string; 
    dettaglio:{ 
    carburante: string; 
    quantita: string; 
    } 
} 

carico.model.ts：
carichi.service.tsで

import { Injectable } from '@angular/core'; 
....some code...  
import { Carico } from './carico.model'; 

@Injectable() 
export class CarichiService { 
    ...some code...  

    getCarichiList(query = {}): FirebaseListObservable<Carico[]> { 
    if (!this.userId) return; 
    this.carichi = this.db.list(`carico/${this.userId}`, { query: query } 
    ); 
    return this.carichi 
    }  
    ...some code... 

    createCarico(carico: Carico): void { 
    this.carichi.push(carico) 
     .catch(error => this.handleError(error)) 
    }  
} 

を私のフォームコンポーネント：
new-carico-form.component.ts

import { Carburante } from '../../impostazioni/carburanti/carburante.model'; 
import { CarburantiService } from '../../impostazioni/carburanti/carburanti.service'; 
...some code... 

constructor(...) {  
    this.createForm(); 
    } 

    ngOnInit() { 
    this.carburanti = this.carburantiService.getCarburantiList(); 
    } 

    createForm() { 
    this.caricoForm = this.fb.group({ 
     dataCarico: Date, 
     riferimentoCarico: [''], 
     dettaglio: this.fb.group({   
     carburante: '', 
     quantita: '' 
     }) 
    }); 
    } 

inserisciCarico(carico: Carico) { 
    this.carichiService.getCarichiList();  
    this.carichiService.createCarico(this.caricoForm.value);  
    this.caricoForm.reset(); 
    } 

    onSubmit() { 
    } 

} 

と私のhtml：
新しい-caricoフォーム-component.html

<md-card> 
    <form [formGroup]="caricoForm" novalidate> 
     <md-card-content> 
     <md-input-container > 
      <input mdInput [mdDatepicker]="picker" placeholder="seleziona data" formControlName="dataCarico"> 
      <button mdSuffix [mdDatepickerToggle]="picker" ></button> 
     </md-input-container> 
     <md-datepicker #picker></md-datepicker> 
     <span class="col"> </span> 
     <md-input-container> 
      <input mdInput placeholder="riferimento" formControlName="riferimentoCarico"> 
     </md-input-container> 
     <table formGroupName="dettaglio">   
      <tr> 
      <td> 
       <md-select placeholder="carburante" formControlName="carburante">      
...some code... 

問題は、私は動作しない唯一のものは、日付でフォームを保存できるということです。私はサブスクリプションの前と後にコンソールに表示しようとしましたが、日付はフォームにあります。助言がありますか？私はFirebaseに戻り、日付以外はすべてあります。

Answer 1

Dateオブジェクトをfirebaseデータベースにプッシュできます。あなたがObject.prototype.toString.call(carico.dateCarico)を使用してdateCaricoの種類をチェックするとあなたはそれがmdDatepickerから[object Date]だ表示されますDate.prototype.toISOString()またはDate.prototype.getTime()

inserisciCarico(carico: Carico) { 
    this.carichiService.getCarichiList(); 
    let formValue = this.caricoForm.value; 
    formValue.dataCarico = formValue.dataCarico.getTime(); 
    // or 
    // formValue.dataCarico = formValue.dataCarico.getISOString(); 

    this.carichiService.createCarico(formValue);  
    this.caricoForm.reset(); 
} 

のようなものを使用して、ミリ秒または文字列にDateを変換する必要があるだろう、これはする必要がありますfirebaseデータベースに行くためにミリ秒または文字列に変換することができます。

あなたはおそらく日付または文字列を受け入れるようにCaricoクラスを変更する必要があります：

dataCarico: Date | string; 

希望に役立ちます！