CODEWITHSUNDEEP
angulartypescriptdatepickerangular-material
Mr. Learner
Mr. Learner

Reputation: 1038

Mat-DatePicker - [(ngModel)] - not able to show user saved date

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

Answers (1)

rcanpahali
rcanpahali

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.

Stackblitz view

Upvotes: 2

Related Questions