0

I have developed a mat-datepicker. I can select a date and save it in the back-end. How do I display the saved date in the input field?

My code:

// 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
{
    "success": true,
    "mandant": {
        "mandantId": 1,
        "firm": "Test Ltd.",
        "financial_year_start": "Juli 1, 2018" // I want to display this value in the input, but in the format DD-MM-YYYY
    }
}


// My service for GET Date
public getCurrentMandantData(): Observable<any> {
    const url = `/current-mandant`;
    return this.http.get<any>(`${environment.baseUrl}` + url);
  }
  • you can use ngModel/formControl for example: have a look at this post: https://stackoverflow.com/questions/52799604/set-default-value-for-angular-material-datepicker-with-angular-5 – angularQuestions Feb 27 '21 at 16:55
  • If I understand correclty, you are able to pick a date and save it. But when you load the page and the date was already set before, the date does not appear in your picker? You need to call getCurrentMandantData() and use the response to update the dateForm – Jusmpty Feb 27 '21 at 17:36
  • yes, can you show me how to do that? –  Feb 27 '21 at 18:26
  • have u try using moment.js to convert it before put it on ngmodel? somthing like -> `moment('Juli 1, 2018').format('DD-MM-YYYY');` – Nicho Mar 01 '21 at 09:31
  • or somthing like -> `let setDate = moment('Juli 1, 2018').format('DD-MM-YYYY'); this.dateForm.controls['financial_year_start'].setValue(setDate)` – Nicho Mar 01 '21 at 09:36

0 Answers0