Question

在我的angular 8应用中，我正在使用@syncfusion/ej2-angular-calendars显示日历。

我的html就像

<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>

在我的组件文件中，我具有以下功能

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

我在第一次更改日期时得到的日期值为null。然后，如果我再次更改日期，我得到的是先前选择的日期，而不是当前选择的日期。但是复选框中的change工作正常。

我选择了日期“ 21/08/2019”，this.form.value中的值就像

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

然后我选择了日期“ 10/08/2019”，this.form.value中的值就像

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

应该显示日期10/08/2019而不是21/08/2019 。

我在这里做错了什么？请帮助解决此问题。

Answer 1

Syncfusion表单组件值是在引发更改事件之后得出的。因此，您可以在change事件中从formObject中获取值，然后可以获取先前的值。对于这种情况，您可以使用blur事件获取表单对象中的更新值。请参考以下示例。

示例链接：https://stackblitz.com/edit/angular-krvj7d?file=app.component.ts。

@ syncfusion / ej2-angular-calendars datepicker与反应形式一起使用时获取以前的值

1 个答案: