Angular Date Pipe funktioniert im Textfeld nicht richtig
Mein Date Pipe funktioniert nicht in Angular. Ich möchte nur als dieses Format MM / TT / JJJJ 'anzeigen. Wie kann es behoben werden?
Typoskript:
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)
});
Konsolenprotokoll: Mi 22.07.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>

Das Datum wird nicht als MM / TT / JJJJ angezeigt und hat zusätzliche Datums- und Uhrzeitstunden, Sekunden usw.
Antworten
Sie können value und formControlName nicht gleichzeitig verwenden. Außerdem wird Ihr Formularsteuerungswert anstelle des Wert-für-Wert-Attributs angezeigt.
Sie müssen dafür eine Problemumgehung hinzufügen. So was
<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);
}
Ich habe die Antwort von Ashot Aleqsanyan gelesen, die meiner Meinung nach richtig für das Geld ist. Ich habe vorher nicht bemerkt, dass Sie den Wert sowohl in formControl als auch in der Eingabe selbst festgelegt haben, was ziemlich falsch zu sein scheint.
Sie können es mit seiner Lösung versuchen oder auch versuchen, die Datumspfeife direkt in Ihre Komponente zu injizieren und wie folgt zu verwenden:
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)
});
}
}
(Ich nahm an, dass Sie Ihre Initialisierung in OnInit durchführen, trotzdem können Sie den Code nach Belieben in der Komponente verschieben.)
Ich denke das sollte gut funktionieren :)