テキストボックスでAngularDatePipeが正しく機能しない

Dec 23 2020

私の日付パイプが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)
});

コンソールログ: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として表示されておらず、追加の日時時間秒などがあります

回答

2 AshotAleqsanyan Dec 23 2020 at 02:24

ほら、valueとformControlNameを同時に使用することはできません。また、value by value属性ではなく、フォームコントロール値が表示されます。

そのための回避策を追加する必要があります。このような

<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 DarioPiotrowicz Dec 23 2020 at 02:20

私はAshotAleqsanyanの答えを読みましたが、これはお金に見合ったものだと思います。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で初期化を行うと仮定しました、とにかくあなたはもちろんあなたが好きなようにコンポーネントの周りでコードを動かすことができます)

私はこれがうまくいくはずだと思います:)