@syncfusion/ej2-angular-calendars datepicker getting previous values when using with reactive forms

Question

In my angular 8 app, I am using @syncfusion/ej2-angular-calendars for showing calendar.

my html is like

<form [formGroup]="visitsForm">
    <div class="disp-in-b mr-bt-sm">
        <ejs-datepicker #ejDatePicker formControlName="visitDate" [value] = "" name="visitDate" id='datepicker' placeholder="{{ 'general.selDate' | translate }}" format="dd/MM/yyyy" (change)="filterVisits()"></ejs-datepicker>
    </div>
    <div class="disp-in-b inline-checkbox text-center float-right" formGroupName="visitType" (change)="filterVisits()">
        <label class="checkbox-inline">
            <input type="checkbox" value="" id="appointments" formControlName="appointments">
               {{ 'general.appointments' | translate }}
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" value="" id="consultation" formControlName="consultation">
             {{ 'general.consultation' | translate }}
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" value="" id="tokens" formControlName="tokens">
            {{ 'general.tokens' | translate }}
        </label>
    </div>
</form>

And in my component file, I have the below function

filterVisits() {
    const formVals = this.visitsForm.value;
    console.log(this.visitsForm.value);
}

I am getting the value of the date filed as null at the first date change. Then if I change the date again, I am getting the previously selected date but not the current selected date. But the change in the check boxes are working fine.

I selected date "21/08/2019" and the value in this.form.value is like

{
    visitDate: ""
    visitType: {appointments: "", consultation: "", tokens: ""}
    __proto__: Object
}

Then I selected the date "10/08/2019" and the value in this.form.value is like

{
    visitDate: Wed Aug 21 2019 00:00:00 GMT+0530 (India Standard Time) {}
    visitType: {appointments: "", consultation: "", tokens: ""}
    __proto__: Object
}

It is supposed to show the date 10/08/2019 instead of 21/08/2019.

What am I doing wrong here? Please help to solve this.

score 0 · Answer 1 · answered Aug 22 '19 at 15:19

Syncfusion form component values are after change event has been raised. So, you can take the value from formObject in change event, then you can get the previous value. For this scenario, you can get the updated value in form object using blur event. Please refer the below sample.

Sample link: https://stackblitz.com/edit/angular-krvj7d?file=app.component.ts.

@syncfusion/ej2-angular-calendars datepicker getting previous values when using with reactive forms

1 Answers1