使用Angular ngModel在输入类型日期中格式化日期时间答案

【问题标题】：Formatting datetime in input type date with Angular ngModel使用Angular ngModel在输入类型日期中格式化日期时间
【发布时间】：2020-05-27 07:58:53
【问题描述】：

我的输入是日期类型，我的“dateOfDiagnosis”是来自控制器的字符串，其中包括时间，像这样

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

&lt;input type="date" class="form-control" [(ngModel)]="claim.claimData.dateOfDiagnosis" (ngModelChange)="markDirty()" name="dateOfDiagnosis"&gt;

控制台中的错误/警告显示

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

所以我尝试像这样对字符串进行切片

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

但这会引发一堆错误。

有没有办法在 html 端格式化它（删除时间）而不在 .ts 文件中做任何事情？或者在 .ts 文件中不做任何事情的情况下做其他事情来让它工作？

错误提示：

错误：模板解析错误：解析器错误：ng:///AppModule/WmacComponent.html@60:92 ("/label> ]claim.claimData.dateOfDiagnosis.slice(0,10)" (ngModelChange)="markDirty()" name="dateOfDiagnosis">

【问题讨论】：

你试过substring而不是slice吗？如果你告诉我们错误，帮助会更容易......
我用错误更新了我的帖子
我刚试了substring，看起来错误是一样的
哦，对了，因为您使用的是双向绑定，它会尝试设置值，并且这两个函数都不能位于赋值的左侧。
你必须在控制器或数据源端修复它。

标签： javascript angular typescript date-formatting

【解决方案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'"

【讨论】：