0

我在我的 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;
  }
}
4

1 回答 1

0

你应该将它与这样的表单实例进行比较它会起作用

public dateComparison = () => {
    return this.form.instance.option("formData").dateOfBirth;
};

有关验证devExpressValidation的更多帮助

于 2019-12-19T07:28:28.227 回答