角日期管道在文本框中无法正常工作 [英] Angular Date Pipe Not Working Correctly in Textbox

问题描述

我的日期管道在Angular中不起作用.我只想以此格式显示MM/dd/yyyy'.怎么解决?

My Date Pipe is not working in Angular. I only want to show as this format MM/dd/yyyy'. How can it be fixed?

打字稿:

this.testDate = new Date(this.singleUser.createDate);
console.log(this.testDate); 

this.userForm = new FormGroup({
  userName: new FormControl(this.singleUser.userName),
  email: new FormControl(this.singleUser.email),
  createDate: new FormControl(this.singleUser.createDate)
});

控制台日志:2020年7月22日星期三17:18:24 GMT-0700(太平洋夏令时)

Console Log: Wed Jul 22 2020 17:18:24 GMT-0700 (Pacific Daylight Time)

HTML:

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" formControlName="createDate" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

日期未显示为MM/dd/yyyy，并且还有其他日期时间小时等，

Date is not showing as MM/dd/yyyy and has additional datetime hours seconds, etc

推荐答案

看，您不能同时使用value和formControlName.还会显示表单控件的值，而不是按值的属性.

Look, you can't use value and formControlName at the same time. Also it shows your form control value instead of value by value attribute.

您需要为此添加一些解决方法.像这样

You need do add some workaround for that. Like this

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" (change)="funcFromTs($event.target.value)" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

Ts

funcFromTs(value: string) {
   this.userForm.get('createDate').patchValue(value);
}

这篇关于角日期管道在文本框中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！