Angular matDatepicker in Reactive form

Question

I am using a matDatepicker ( https://material.angular.io/components/datepicker/api ) in an Angular reactive form.

I created a stackblitz to replicate my issue https://stackblitz.com/edit/angular-57kwq6?file=src%2Fapp%2Fapp.component.ts

I get an object Competition from the server containing a Date object. This object is mapped to the form. I am trying to initialize the datePicker with the date present in the object but it's not working. Besides, when i select a date and click on Save, it doesn't update my object.

The server is a spring boot application. The Java object is :

import java.io.Serializable;
import java.util.Date;
public class Competition implements Serializable {

    private String id;
    private Date date;

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

}

It looks to me i have either an issue serializing the date in json or formatting the date for the datepicker component ?

Edric · Accepted Answer · 2020-04-07 14:08:23Z

4

Firstly, if you're using Angular's Reactive Forms, you shouldn't use ngModel:

<input name="myDate" matInput [matDatepicker]="picker3"
  class="form-control" placeholder="Date"  
  formControlName="date">

Secondly, your model's date value should be set to the value of a Date instead of a string:

this.editor = fb.group({ 
  date: [new Date(this.model.date), Validators.required], 
});

edited Apr 7, 2020 at 14:08

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Apr 6, 2020 at 17:59

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaetan56 Over a year ago

ok, i am quite new at Angular and i think i mixed Reactive and template driven approach! i will focus on reactive form which should make things less confusing for me, thank you

Collectives™ on Stack Overflow

Angular matDatepicker in Reactive form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related