Angular 2 material datepicker ngModel not displaying value

Question

I am new to angular and material 2, I am using material date picker in my form to display and select the date. I am able to select the date and bind to ngModel. But when I try to bind my response to ngModel showing nothing. I have converted my string date to date and then binding to ngModel. Below is the code, Please help me where i am missing.

 <mat-form-field>
  <input matInput id="dateOfBirth" name="dateOfBirth" [matDatepicker]="dateOfBirth" 
          class="form-control" [(ngModel)]="customer.dateOfBirth"
            placeholder="Date of birth" required>
 <mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
          <mat-datepicker #dateOfBirth></mat-datepicker>
          <mat-error>Date of birth is required</mat-error>
        </mat-form-field>

my ts file getting the response from json

   customer: CustomerModel = new CustomerModel();
 this.customerService.getResponse().subscribe(resp => {
           this.customer= resp;
 console.log('Date:'+this.customer.dateOfBirth);// able to print
        });

    Class CustomerModel {
        dateOfBirth: Date; 
         //other customer details
      }

Here I have created sample https://stackblitz.com/edit/angular-pvqugs

Do you see an error message in the console?

Martin Parenteau
– Martin Parenteau

2018-02-25 20:18:31 +00:00
Commented Feb 25, 2018 at 20:18 — Martin Parenteau
– Martin Parenteau, Commented Feb 25, 2018 at 20:18
can you try to provide your code on stackblitz?

davecar21
– davecar21

2018-02-25 22:37:09 +00:00
Commented Feb 25, 2018 at 22:37 — davecar21
– davecar21, Commented Feb 25, 2018 at 22:37
@ConnorsFan: No, I didn't see any error

stackUser44
– stackUser44

2018-02-26 04:28:20 +00:00
Commented Feb 26, 2018 at 4:28 — stackUser44
– stackUser44, Commented Feb 26, 2018 at 4:28
@davecar21: stackblitz.com/edit/angular-pvqugs

stackUser44
– stackUser44

2018-02-26 05:10:47 +00:00
Commented Feb 26, 2018 at 5:10 — stackUser44
– stackUser44, Commented Feb 26, 2018 at 5:10

stackUser44 · Accepted Answer · 2018-02-27 20:02:59Z

3

I resolved it, I was converting the string date format and then tried to bind with the ngModel. I removed my format date part(using DatePipe) and converted string to date.

    if (date) {
  let dateOld: Date = new Date(date);
  return dateOld;
    }

Here the updated code https://stackblitz.com/edit/angular-pvqugs

answered Feb 27, 2018 at 20:02

stackUser44

4094 gold badges14 silver badges25 bronze badges

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

Comments

Cristian Sevescu · Accepted Answer · 2018-02-26 11:43:15Z

1

On your example from stackblitz, on init, you set the date to a string value, that is not accepted by datepicker component. If you comment ngOnInit method, it will display the value.

Not enough details in the code here to know what type is customer.dateOfBirth. It works fine with type date.

This example from the documentation shows different ways of binding the component, even with a serialized value: https://stackblitz.com/angular/dlerqrdamjl?file=app%2Fdatepicker-value-example.html

answered Feb 26, 2018 at 11:43

Cristian Sevescu

1,52910 silver badges12 bronze badges

1 Comment

stackUser44 Over a year ago

my json response is sending string date, I have converted string to date, But still not working

Collectives™ on Stack Overflow

Angular 2 material datepicker ngModel not displaying value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related