Angular2 - 反応形式の日付フィールドの設定

Question

2つの日付フィールド、開始日は&、終了日は2つ使用するコンポーネントがあります。

デフォルトでは、終了日フィールドが無効になっており、開始日を選択するとその項目が切り替わります。

this.transitionForm = this.fb.group({ 
effectiveEndDate: [{ value: '', disabled: true }] 
..... 
}); 

私はコード内にこの終了日フィールドの値を設定しようとしています。

this.transitionForm.controls['effectiveEndDate'].setValue(this.utils.currentDate()); 

ユーティリティ機能：

/** 
* Returns the current date 
*/ 
currentDate() { 
    const currentDate = new Date(); 
    const day = currentDate.getDate(); 
    const month = currentDate.getMonth() + 1; 
    const year = currentDate.getFullYear(); 
    return month + "/" + day + "/" + year; 
} 

HTML：

<input type="date" class="form-control input-sm" id="effectiveEndDate" name="effectiveEndDate" placeholder="Required" formControlName="effectiveEndDate"> 

何らかの理由で、フィールドはいえ更新取得されません。

PatchValueも使用しようとしていて、それも設定していませんでした。

私には何が欠けていますか？

Answer 1

あなたは（他のブラウザでテストされていません）Chromeでこのコードを実行すると、それはコンソールにエラーを記録します：

指定された値 " 7/26/2017 "が必要なフォーマット" yyyy-MM-dd "に準拠していません。このが解決んが

currentDate() { 
    const currentDate = new Date(); 
    return currentDate.toISOString().substring(0,10); 
} 

Live plunker example

：私は問題がかなりよく

を説明あなたが何かにあなたのcurrentDate()方法を変更することにより、それを修正することができると思い

問題the answer from @JGFMKは、を使用して日付を変換するより良い方法を示しています3210

Answer 2

FormBuilder.groupはFormGroupを返す：
https://angular.io/api/forms/FormBuilder#group
https://angular.io/api/forms/FormGroup#setValue

アップデート：

• here議論される活字体に角パイプを使用します。
• Discussion for locale：navigator.language。
• Instantiate a Date Pipe
• Dates in Angularについての討議。
• 日付パイプdocsおよびsource code。

---

import {DatePipe} from '@angular/common' 
... 
let dp = new DatePipe(navigator.language); 
let p = 'y-MM-dd'; // YYYY-MM-DD 
let dtr = dp.transform(new Date(), p); 
this.transitionForm.setValue({effectiveEndDate: dtr}); 

---

Plunker example (just hit reset)