After creating a mat-datepicker and saving the selected date in the back-end, I am now wondering how to display the saved date in the input field.
Below is my code snippet:
// HTML
<mat-form-field appearance="fill">
<mat-label>Datum</mat-label>
<label>
<input matInput [matDatepicker]="picker" formControlName="financial_year_start" required>
</label>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="settingsContentForm.get('financial_year_start').hasError('required')">Input is required!</mat-error>
</mat-form-field>
// TS
dateForm: FormGroup;
ngOnInit() {
this.dateForm = this.formBuilder.group({
financial_year_start: [null, Validators.required],
});
}
// My JSON Data
{
"success": true,
"mandant": {
"mandantId": 1,
"firm": "Test Ltd.",
"financial_year_start": "July 1, 2018" // Display this value in the input field as DD-MM-YYYY format
}
}
// Service for GET Date
public getCurrentMandantData(): Observable<any> {
const url = `/current-mandant`;
return this.http.get<any>(`${environment.baseUrl}` + url);
}