我在我的 Angular 8 应用程序中使用 devexpress,并且在日期比较字段中存在问题。如果我使用控件选择日期,它工作正常。但是,如果我在两个日期控件中手动键入确切的日期,日期字段会以红色突出显示,表示它们不匹配。有人可以告诉我问题是什么
用户界面
<dxi-item dataField="dateOfBirth" editorType="dxDateBox" [editorOptions]="dateOfBirthEditorOptions">
<dxi-validation-rule type="required"></dxi-validation-rule>
</dxi-item>
<dxi-item dataField="confirmDateOfBirth" editorType="dxDateBox" [editorOptions]="dateOfBirthEditorOptions">
<dxi-validation-rule type="required"></dxi-validation-rule>
<dxi-validation-rule type="compare" [comparisonTarget]="dateComparison"></dxi-validation-rule>
</dxi-item>
TS
export class Invite {
firstName: string;
lastName: string;
email: string;
phone: string;
dateOfBirth: string;
preferredName: string;
preferredFirstName: string;
preferredLastName: string;
repId: number;
conflictApproved: boolean;
}
import { ViewChild } from '@angular/core';
import { DxFormComponent } from 'devextreme-angular';
import _ from 'lodash';
import { HttpErrorResponse } from '@angular/common/http';
import { AddDefaultValidationMessages } from '../../../shared/helpers/add-default-validation-messages';
import { Invite } from '../models/invite.model';
import { InviteService } from '../services/invite.service';
import { ConfirmationDialogService } from '../../../shared/services/confirmation-dialog.service';
import HttpStatusCode from '../../../shared/constants/httpStatusCode';
import { chain } from '../../../shared/helpers/chain';
export class BaseInvite {
constructor(protected readonly service: InviteService, private confirmationDialog: ConfirmationDialogService) {}
public buttonText: string;
public headerText: string;
public showEmail = true;
public currentRepId = 0;
protected inviteMethod;
public infoText: string;
public gcodeText: string;
@ViewChild(DxFormComponent, { static: false }) form: DxFormComponent;
public invite: Invite = new Invite();
public sending: boolean;
public phoneEditorOptions = { mask: '+44 7000 000000', useMaskedValue: true };
public minimumBirthDate = new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate());
public dateOfBirthEditorOptions = {
width: '100%',
max: this.minimumBirthDate,
dateOutOfRangeMessage: 'Age must be at least 18 years'
};
public namePattern: any = /^[^0-9]+$/;
public emailComparison = () => this.invite.email;
public phoneComparison = () => this.invite.phone;
public dateComparison = () => this.invite.dateOfBirth;
public addDefaultValidationMessages = item => AddDefaultValidationMessages(item);
public sendInvite = () => {
this.currentRepId = this.invite.repId;
this.sending = true;
this.inviteMethod(_.cloneDeep(this.invite))
.then(result => {
if (result === true) {
this.form.instance.resetValues();
this.invite.repId = this.currentRepId;
}
})
.finally(() => (this.sending = false))
.catch((e: HttpErrorResponse) => {
if (e.status === HttpStatusCode.CONFLICT && !this.invite.conflictApproved) {
this.confirmationDialog.show(
chain(() => e.error.message) + ' Do you want to continue and assign the person to selected representative?',
'Person already exists',
() => {
this.invite.conflictApproved = true;
this.sendInvite();
}
);
}
});
return false;
}
}