Reputation: 1038
Could someone tell how to show user saved date in Mat-Datepicker?
initially am getting endDate as null from get service (data from nested object, that calling from another component ). when going to edit mode. am selecting value and save it. In console, it prints selected date. but in Network it goes null.
this.endDate: string;
<mat-form-field>
<input matInput [value] = "endDate" [matDatepicker]="myDatepicker" name="endDate" [(ngModel)]="endDate">
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>
in save method:
save(){
let obj = {
endDate = this.endDate; // my ngModel
}
}
updateChange(d){
this.endDate = d; // i can see the changed value here but not able to save
}
actual object for saving data
const sample : OriginalModel = {
demoKey : this.sample['key'].demo,
demoKey2 : this.sample['key2'].demo2,
endDate : this.endDate
}
how to get this done to show user saved value in edit mode ?
kindly share solution/ working stackblitz .
Thanks in advance
Upvotes: 0
Views: 5057
Reputation: 2643
I don't know why you are trying to wrap your date value into {}
but you can achieve this by using following syntax,
Your component side,
sample: any = { demoKey: "", demoKey2: "", demoKey3: "", endDate: new Date }
On your html side,
<mat-form-field>
<input matInput placeholder="demoKey1" name='demoKey' [(ngModel)]='sample.demoKey' >
...
</mat-form-field>
You don't need to use save function to set two way binding variables, try to console log obj.endDate
with a function instead and see how magic happens.
Here is stackblitz example for your case, hope it will help.
Upvotes: 2