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

Posted 2023-03-13

【中文标题】角度日期管道在文本框中无法正常工作

【英文标题】：Angular Date Pipe Not Working Correctly in Textbox

【发布时间】：2021-04-01 11:45:47

【问题描述】：

我的日期管道在 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)
);

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

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

【问题讨论】：

另见这篇文章：***.com/questions/49522542/…

【参考方案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);

【参考方案2】：

我阅读了 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 中进行初始化，当然你可以随意移动组件周围的代码）

我认为这应该很好用:)

【讨论】：

您能提供解决方案的工作代码吗？谢谢

实际上我一直在玩它，我错了，因为初始设置实际上工作正常，我尝试了标准输入，没关系，对不起我的错误答案，我正在修改它现在

我再次坚持认为，在这种情况下注入管道会产生更好/更清洁的代码，所以我只是根据 Ashot 所说的内容，并使用我之前所说的内容提供了一个新的解决方案，再次抱歉之前的错误答案：P

Ashot 感谢您的输入 :) ，是的，您可以在组件中提供管道，并且在那里添加它是对的，我忘记了，因为我通常在应用程序的模块中提供服务，而不是在组件本身.在管道的情况下，我想它没有太大区别（但我很想知道您是否知道在此处提供管道而不是在应用程序模块中提供更好的原因:)）

我只记得我在组件中使用数据管道时遇到的错误:)）。通常，我不会将管道提供到模块提供程序列表中。我只为我需要的当前组件提供。如果您询问不同的情况，是的，我知道