Pipa Tanggal Sudut Tidak Berfungsi dengan Benar di Kotak Teks
My Date Pipe tidak berfungsi di Angular. Saya hanya ingin menampilkan dalam format ini MM / dd / yyyy '. Bagaimana cara memperbaikinya?
Naskah:
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)
});
Log Konsol: Rab 22 Jul 2020 17:18:24 GMT-0700 (Waktu Musim Panas Pasifik)
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>
Tanggal tidak ditampilkan sebagai BB / hh / tttt dan memiliki tambahan jam waktu detik, dll
Jawaban
Lihat, Anda tidak dapat menggunakan nilai dan formControlName secara bersamaan. Juga itu menunjukkan nilai kontrol formulir Anda, bukan nilai menurut atribut nilai.
Anda perlu menambahkan beberapa solusi untuk itu. Seperti ini
<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);
}
Saya membaca jawaban Ashot Aleqsanyan yang menurut saya benar tentang uang, saya tidak memperhatikan sebelumnya bahwa Anda menetapkan nilai baik di formControl dan input itu sendiri, yang tampaknya cukup salah.
Anda dapat mencoba dengan solusinya atau juga mencoba menyuntikkan pipa kurma langsung ke komponen Anda dan menggunakannya seperti ini:
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)
});
}
}
(Saya berasumsi bahwa Anda melakukan inisialisasi di OnInit, bagaimanapun Anda dapat memindahkan kode di sekitar komponen sesuka Anda tentunya)
Saya pikir ini harus bekerja dengan baik :)