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

Question

我创建了一个小型反应式表单验证 表单验证工作正常，但是当我更改

fromDate

并且之后我更改

toDate

时，时间验证不起作用。

如果我以相反的顺序进行验证，则验证有效。

这里我添加了我的 Stackblitz，请帮助我，我该如何克服这个问题Stackblitz 链接

Answer 1

您的问题与您使用自定义时间验证器的方式有关。发生的事情是，您在获得

fromDate

值

之前尝试验证 

toDate

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

    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

错误，或者如果值无效，则将其附加到当前控件。在这两种情况下（错误/无错误），您都不会从

_fromDate

控件中清除错误，这会使您的表单处于无效状态，直到您对 _formDate 进行更改。

而且

clearValidators

的用法有点错误，

clearValidators

是一种方法/函数，所以你必须调用它

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) im removing the errors from both

_toDate

和

_fromDate

控件

这是一个正在运行的 stackBlitz

Answer 2

您可以为日期创建一个组并为其创建一个验证器。表格将如下所示：

this.form = this.formBuilder.group({
        FirstName: ['', Validators.required],
        LastName: ['', Validators.required],
        datesGroup: this.formBuilder.group({
            filterFrom: ['', [Validators.required]],
            filterTo: ['', [Validators.required]]
        }, {
            validators: [
                formvalidation.datesValidator('filterFrom', 'filterTo')
            ]
        })
    });

你的验证器可以很简单：

static datesValidator(field1: string, field2: string) {
    return (group: FormGroup): ValidationErrors | null => {
        const c1 = group.controls[field1];
        const c2 = group.controls[field2];
        if (c1.value >= c2.value) {
            return {invalidPeriod: true}
        }
        return null;
    };
}