使用 Angular ngModel 格式化輸入類型日期中的日期時間

Question

我的輸入是日期類型，我的“dateOfDiagnosis”是來自控制器的字符串，其中包括時間，如下所示

“2010-09-08T00:00:00”

 <input type="date" class="form-control" [(ngModel)]="claim.claimData.dateOfDiagnosis" (ngModelChange)="markDirty()" name="dateOfDiagnosis">

控制台中的錯誤/警告說

指定的值“2010-09-08T00:00:00”不符合要求的格式“yyyy-MM-dd”。

所以我試着像這樣切割字符串

[(ngModel)]="claim.claimData.dateOfDiagnosis.slice(0,10)"

但這引發了一堆錯誤。

有沒有辦法在 html 端格式化它（刪除時間）而不在 .ts 文件中做任何事情？ 或者做其他事情來讓它工作而不在 .ts 文件中做任何事情？

錯誤說：

錯誤：模板解析錯誤：解析器錯誤：ng:///AppModule/WmacComponent.html@60:92 中 [claim.claimData.dateOfDiagnosis.slice(0,10)=$event] 中第 44 列的意外標記“=” ("/label> ]claim.claimData.dateOfDiagnosis.slice(0,10)" (ngModelChange)="markDirty()" name="dateOfDiagnosis">

Answer 1

這里的問題是ngModel是雙向綁定的。 當你向下傳遞一個值時，應用像slice這樣的方法是有效的，但當它被重新傳遞時就不行了。 展開后，您的ngModel綁定如下所示：

[ngModel]="claim.claimData.dateOfDiagnosis.slice(0,10)" 
    (ngModelChange)="claim.claimData.dateOfDiagnosis.slice(0,10)=$event"

線

claim.claimData.dateOfDiagnosis.slice(0,10)=$event

沒有意義，這就是觸發您的錯誤的原因。

有幾種方法可以解決這個問題，具體取決於上下文的特定要求。

如果dateOfDiagnosis字段不需要采用2010-09-08T00:00:00格式，您可以簡單地調用

this.claim.claimData.dateOfDiagnosis = this.claim.claimData.dateOfDiagnosis.slice(0,10);

在哪里設置，或者您可以使用不同的變量以YYYY-MM-DD格式跟蹤日期，並在將其分配回claim.claimData.dateOfDiagnosis時添加T00:00:00 。

你甚至可以使用ngModel擴展形式來完成這一切。 IE：

[ngModel]="claim.claimData.dateOfDiagnosis.slice(0,10)" 
    (ngModelChange)="claim.claimData.dateOfDiagnosis = $event + 'T00:00:00'"