這是我的簡單代碼，只適用於'標題'。 'docdatetime'控件顯示爲空白。我究竟做錯了什麼？如何綁定日期/時間窗體控件？

 //template =================================================== 
     <div class="form-group"> 
      <input type="text" id="title" formControlName="title" class="form-control"> 
     </div> 

     <div class="form-group"> 
      <input type="datetime-local" id="docdatetime" formControlName="docdatetime" class="form-control"> 
     </div> 

     //component.ts =============================================== 
     import { FormGroup, FormControl } from '@angular/forms'; 
     ..... 

     export class..... 
      docForm: FormGroup; 

      ngOnInit() { 
       let docTitle = 'My first document'; 
       let docDate = 'Jun 15, 2015, 9:43:11 PM'; 
       this.docForm = new FormGroup({ 
        'title': new FormControl(docTitle), 
        'docdatetime': new FormControl(new Date(docDate)) 
       }); 
      }

2017-10-12 VladP

這樣做的原因錯誤是DatetimeLocal財產上的輸入需要一個非常特定的格式，爲YYYY-MM-DDTHH:MM:SS.SSS 。這種格式被稱爲ISO日期。所以要解決你的錯誤，你必須以這種格式傳遞一個日期。但是，實際的ISO日期格式是YYYY-MM-DDTHH:MM:SS.SSSZ。 Z指的是時區，它始終爲零的UTC偏移量。 Look here for information on ToISOString()。所以，簡單的解決方法是簡單地切掉最後一個字符，該字符始終是new Date().toISOString()中的字符Z。

let docTitle = 'My first document'; 
let docDate = 'Jun 15, 2015, 21:43:11 UTC'; //You'll want to change this to UTC or it can mess up your date. 
this.docForm = new FormGroup({ 
    'title': new FormControl(docTitle), 
    'docdatetime': new FormControl(new Date(docDate).toISOString().slice(0, -1)) 
});

注：

這意味着，您從輸入獲得的價值將不是一個實際的Date。這將是一個字符串。因此，如果您稍後需要它作爲日期，請確保使用字符串的值創建New Date()，並且應該很好。

編輯

這裏是顯示這個工作一個plunk。

來源

2017-10-12 17:50:04

也不起作用:-( – VladP

它工作正常在這[plunk]（https://plnkr.co/edit/40M4ZtgIteJJkVkO8mN6?p=preview）。你可能錯過了其他的東西。你能顯示你的代碼的其餘部分嗎？ –

謝謝君康。 ..我只需重新啓動Visual Studio代碼並清理瀏覽器的緩存。 – VladP

嘗試添加到ngOnInit部分如下：

this.docForm.controls['docTitle'].setValue('My first document'); 
this.docForm.controls['docDate '].setValue('Jun 15, 2015, 9:43:11 PM');

來源

2017-10-12 17:30:26

我想使用FormGroup/FormControl概念 – VladP

這是使用這個概念。此解決方案基於我在這裏的類似問題：https://stackoverflow.com/questions/46457401/angular-2-check-if-input-in-reactive-form-is-empty-enter-default-value- if-no-i/46458928＃46458928 編輯「添加」而不是更改的答案。基本上你已經實例化了formgroup後添加這個。 –

它也不起作用。日期/時間控制本身可能有問題！當我提交表單時，我可以在控制檯日誌中看到該值是正確的'2015年6月15日，下午9:43:11'但是它在瀏覽器窗口中爲空白 – VladP

如何綁定日期/時間窗體控件？

回答

注：

編輯

相關問題