Angular 日期管道在文本框中无法正常工作

Question

我的日期管道无法在 Angular 中运行。我只想显示为这种格式 MM/dd/yyyy'。如何解决？

typescript :

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)
});

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，并且具有额外的日期时间小时秒等

Answer 1

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

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

<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);
}