使用Angular ngModel格式化输入类型为date的datetime

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（“ / 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格式跟踪日期，并将T00:00:00分配回claim.claimData.dateOfDiagnosis时将其添加。

您甚至可以使用ngModel的扩展形式就位。即：

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