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

<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>

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

HTML:

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

<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>

创建日期

---

Date没有显示为MM/dd/yyyy，并且有额外的datetime小时秒等

我读了Ashot Aleqsanyan的答案，我认为这在money上是正确的，之前我没有注意到您在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中进行初始化，当然，您可以随意移动组件中的代码）

---

我认为这应该可以很好地工作：）

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

---

您能为解决方案提供工作代码吗？谢天谢地，实际上我一直在玩弄它，我错了，因为初始设置实际上很好，我尝试了标准输入，这没关系，很抱歉我的回答不正确，我现在再次修改它。我的想法是，在这种情况下，注入管道将产生更好/更干净的代码，因此，我只花了Ashot所说的内容，并使用我之前所说的内容提供了一个新的解决方案，再次为之前的错误答案感到抱歉：PAshot感谢您的输入：），是的，您可以在组件中提供管道，您在组件中添加管道是正确的，我忘记了，因为我通常在应用程序的模块中提供服务，而不是组件本身。在管道的情况下，我想这没有多大区别（但我很想知道你是否知道在这里提供管道而不是在应用程序模块中提供管道更好的原因：），只是我记得在组件中使用数据管道时出现的错误：）。通常，我不会在模块提供者列表中提供管道。我只提供当前组件，我需要它。如果你问的是不同的例子，是的，我知道也请看这篇文章：