多个案例的可重用验证器

Question

我做了一个日期验证器。它验证现有日期。我需要具有其他限制的多个日期验证器，例如：不允许用户输入未来日期的最大日期验证器或只接受过去日期的日期验证器。这是我当前的验证器。

    export function dateValidator(group) {

  const {day, month, year} = group.value;
  const fullDate = `${day}/${month}/${year}`;
  const dobPattern = /^(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})$/;
  const isStringValid = dobPattern.test(fullDate);

  let isValid = false;

  if (isStringValid) {
    const intDay = Number(day);
    const intMonth = Number(month);
    const intYear = Number(year);
    const jsMonth = intMonth - 1;
    const date = new Date(intYear, jsMonth, intDay);
    isValid = (date.getFullYear() === intYear && date.getMonth() === jsMonth && date.getDate() === intDay ;
  }

  return isValid ? null : { invalid: 'Invalid date' };
};

如何限制用户输入未来的日期。我将此代码与以下行一起使用：

    isValid = (date.getFullYear() === intYear && date.getMonth() === jsMonth && date.getDate() === intDay ;

但我想知道是否有更简单的方法，而不必一遍又一遍地复制和粘贴这段代码来对其进行小的限制。

Answer 1

你的dateValidator()函数应该是一个函数工厂（即一个函数returns一个函数）而不是直接 returns 错误的函数：

export function dateValidator(maxDate: string): ValidatorFn {
  // Return a validator function.
  return (group: FormGroup): {[key: string]: any} => {
    // Re-use your existing validation code here and return the error if any.
    // Optionally, use the `maxDate` param to customize the validation:
    // entered dates should not go beyond `maxDate`.
  };
}

如您所见，您可以通过向函数工厂传递参数来自定义验证器函数。在我的示例中，我使用 maxDate 参数来指示验证器应允许的最远时间日期。

在您的表单模型中，通过使用适当的值调用工厂来使用此验证器，例如:

this.myForm = fb.group({
  'date': ['', [Validators.required(), dateValidator('02/20/2017')]]
});

您可以在文档中看到验证器的函数工厂的另一个示例：https://angular.io/docs/ts/latest/cookbook/form-validation.html#custom-validation

多个案例的可重用验证器

resuable validator for multiple cases

validation

custom-validators

angular

angular-reactive-forms