Angular 表单验证起始日期应大于截止日期

Question

我创建了一个小的响应式表单验证表单验证工作正常，但是当我更改 fromDate 之后更改 toDate 时，时间验证不起作用。

如果我以相反的顺序执行验证工作。

这里我添加了我的 Stackblitz，请帮助我，我该如何解决这个问题Stackblitz Link

Answer 1

您的问题与您使用自定义时间验证器的方式有关。发生的事情是你试图在拥有 toDate 值

之前验证 fromDate

所以你的表单看起来像这样：

    this._formGroup = this._formbuilder.group({
      FirstName: ["", [Validators.required]],
      LastName: ["", [Validators.required]],
      _gender: ["1", [Validators.required]],
      _dob: ["", [Validators.required]],
      _fromDate: ["", [Validators.required, formvalidation.comparedate]],
      _ToDate: ["", [Validators.required, formvalidation.comparedate]]
    });

你的自定义验证器看起来像这样

  static comparedate(control: AbstractControl) {
    if (control.parent) {
      let _fromDate = (<FormGroup>control.parent).get("_fromDate").value;
      let _netDate = (<FormGroup>control.parent).get("_ToDate").value;
      if (_fromDate <= _netDate) {
        (<FormGroup>control.parent).get("_fromDate").clearValidators;
        (<FormGroup>control.parent).get("_ToDate").clearValidators;
        return null;
      } else {
        return { Datecompare: null };
      }
    }

发生的事情是，当您第一次验证 _formDate 时，您正在使用空字符串验证它的值并将错误附加到控件。

之后，当您在 _toDate 中输入值时，即使日期有效，您也会从当前控件中删除 DateCompare 错误，或者如果值无效，则将其附加到当前控件.在这两种情况下 (error/no-error)，您都没有清除 _fromDate 控件中的错误，这会使您的表单处于无效状态，直到您更改 _formDate。

此外 clearValidators 的用法有点错误，clearValidators 是一个 method/function 所以你必须称它为 clearValidators()，但即使你使用方法正确并删除验证器，如果用户对表单进行进一步更改，将没有日期验证

我对你的问题的建议如下

  static comparedate(control: AbstractControl) {
    if (control.parent) {
      let _fromDate = (<FormGroup>control.parent).get("_fromDate").value;
      let _toDate = (<FormGroup>control.parent).get("_toDate").value;

      if (_fromDate && _toDate) {
        if (_fromDate >= _toDate) {
          control.parent.get("_toDate").setErrors({ Datecompare: true });
          control.parent.get("_fromDate").setErrors({ Datecompare: true });
          return { Datecompare: true };
        }
        control.parent.get("_toDate").setErrors(null);
        control.parent.get("_fromDate").setErrors(null);
        return null;
      }

      return null;
    }
  }

所以在这个验证器中，我首先检查两个控件是否都有值，如果它们有值，然后我检查是否应该附加 Datecompare 错误。在验证有效的情况下（_formDate < _toDate）我从 _toDate 和 _fromDate 控件中删除错误

这是一个有效的 stackBlitz

Angular 表单验证起始日期应大于截止日期

Angular Form validation From date should be Gretaer than To Date

angular

angular-forms