使用 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)"

但这扔了一堆错误。

有没有办法在不对 .ts 文件执行任何操作的情况下在 html 端格式化它(删除时间(？ 或者做其他事情来让它工作，而无需在 .ts 文件中做任何事情？

错误说：

错误：

模板分析错误： 解析器错误：ng:///AppModule/WmacComponent.html@60:92 ("/label>]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来完成所有操作。 即：

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