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

Question

我的日期管道在 Angular 中不工作。我只想显示为这种格式 MM/dd/yyyy'。如何修复？

打字稿：

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

我读了 Ashot Aleqsanyan 的回答，我认为这是对的，我之前没有注意到你在 formControl 和输入本身中都设置了值，这看起来确实是错误的。

您可以尝试使用他的解决方案，或者也可以尝试将日期管道直接注入您的组件并像这样使用它：

import { DatePipe } from '@angular/common';

@Component({
   providers: [DatePipe]   // you need to provide datepipe in providers list for your component
})
class YourComponent implements OnInit {

  constructor(private datePipe: DatePipe) {}

  ngOnInit(){
       // you don't want the testDate field
       // this.testDate = new Date(this.singleUser.createDate);

       const createDate = this.datePipe.transform(this.singleUser.createDate, 'yyyy-MM-dd');
       console.log(createDate); 

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

（我假设你在 OnInit 中进行初始化，当然你可以随意移动组件周围的代码）

我认为这应该很好用:)

Answer 2

你看，你不能同时使用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);
}

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

Angular Date Pipe Not Working Correctly in Textbox

typescript

angular-material

angular

angular10