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

本文介绍了角度日期管道在文本框中无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我的日期管道在 Angular 中不起作用.我只想显示为这种格式 MM/dd/yyyy'.怎么修?

打字稿:

this.testDate = new Date(this.singleUser.createDate);console.log(this.testDate);this.userForm = new FormGroup({用户名:新表单控件(this.singleUser.userName)，电子邮件:新表单控件(this.singleUser.email)，创建日期:新表单控件(this.singleUser.createDate)});

<块引用>

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

HTML:

<mat-label>创建日期</mat-label><input matInput [readonly]="true";formControlName="createDate"[值] = "测试日期 |日期:'MM/dd/yyyy'"></mat-form-field>

日期没有显示为 MM/dd/yyyy 并且有额外的日期时间小时秒等

解决方案

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

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

<mat-label>创建日期</mat-label><input matInput [readonly]="true";(change)=funcFromTs($event.target.value)"；[值] = "测试日期 |日期:'MM/dd/yyyy'"></mat-form-field>

Ts

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

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

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>

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

解决方案

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