使用角度日期管道在 ngModel 表单中格式化日期时间

Question

我在下面有这个，其中birthDate是"1938-08-08T00：00：00"，我希望它是"dd/MM/yyyy"，但我似乎无法弄清楚如何在ngModel中使用 Angular 日期管道。

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">

我试过这个没有运气：

[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}

我能让它工作的唯一方法是，如果我先使用 Angular 'formatDate((' 格式化 .ts 代码中的日期

Answer 1

我不明白为什么要在ngModel中格式化它。

单向数据绑定(插值 {{}}(在双向数据绑定中不起作用。如果你想使用pipe，我建议使用值属性而不是ngModal。

您的 HTML 应如下所示：

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">

这是一个活生生的例子。 https://stackblitz.com/edit/angular-ubpthb

Answer 2

在 Angular 9 上，这对我有用，具有双向绑定：

<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>

Answer 3

ref - 在 ngModel 中使用管道 在 Angular 中的输入元素上

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">