Metin Kutusunda Açısal Tarih Borusu Düzgün Çalışmıyor

Question

Date Pipe'ım Angular'da çalışmıyor. Ben sadece bu formatta AA / gg / yyyy 'olarak göstermek istiyorum. Nasıl düzeltilebilir?

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

Konsol Günlüğü: 22 Temmuz 2020, 17:18:24 GMT-0700 (Pasifik Yaz Saati)

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>

Tarih AA / gg / yyyy olarak gösterilmiyor ve ek tarih saat saniye, vb. İçeriyor.

Answer 1

Bak, value ve formControlName'i aynı anda kullanamazsınız. Ayrıca değer özniteliğine göre değer yerine form kontrol değerinizi gösterir.

Bunun için biraz geçici çözüm eklemeniz gerekiyor. Böyle

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

Answer 2

Parayla ilgili doğru olduğunu düşündüğüm Ashot Aleqsanyan'ın cevabını okudum, daha önce hem formControl'de hem de girdinin kendisinde değeri belirlediğinizi fark etmemiştim, ki bu oldukça yanlış görünüyor.

onun çözümünü deneyebilir veya tarih borusunu doğrudan bileşeninize enjekte etmeyi deneyebilir ve şu şekilde kullanabilirsiniz:

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

(Başlatmanızı OnInit'te yaptığınızı varsaydım, yine de kodu elbette istediğiniz gibi bileşen etrafında hareket ettirebilirsiniz)

Bence bu güzel çalışmalı :)