は、角型材のmdDatepickerにデータを送ります。

Question

私のfullstackプロイエクトでは、私は処方箋で日付を更新する必要があります。これは、データベースからデータを受信し、データベースから元の値で入力を設定します。問題はmdDatepickerの入力を設定しようとしたときに、何が間違っているのか分かりません。これはエラーです

エラー：DatePicker：DateAdapterによって日付オブジェクトとして認識されない値です。

バックエンド：mysqlの フロント： データベースをnodejs

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 
    ) {} 
} 

角度4

クラスが、これは編集のためにコントロールされている処方

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 
    }) 
    } 

はこれがために私のpatchvalueです処方箋

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 
       }) 
      } 
      } 
     ) 
    } 

、これはmdDatePicker

のための私のHTMLビュー

<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> 

おかげ

Answer 1

あなたはpatchValue呼び出しで日付formControlを参照するために使用したキーが追加された「D」の代わりcreatedAt:のcreatedAtd:を持っています。それは問題ですか？

EDIT

報告this issueを参照すると、それが原因の代わりに実際のDateオブジェクトの文字列値を割り当てられている日付ピッカーの可能性があります。 ''の代わりにnullに日付コントロールの初期値を割り当てることができます（これは実際問題ではないかもしれませんが、確かではありません）。そのコントロールに新しい値を設定するときは常に、それが実際のDateオブジェクトであることを確認してください（ジャバスクリプトDateライブラリを使用するか、またはmomentjsを使用してのいずれか。

だからあなたの例では、これらの変更を作ってみることができ、

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 
       }) 
      } 
      } 
     ) 
    } 

あなたはおそらく、あなたのアプリの後半で、この値を更新するたびに確認する必要があります、単なる文字列ではなく、有効なDate型にすることをお勧めします。