如何以角度反应形式强制一个日期大于另一个日期？答案

【问题标题】：How to enforce that one date is bigger than the other in angular reactive form?如何以角度反应形式强制一个日期大于另一个日期？
【发布时间】：2021-01-24 10:45:47
【问题描述】：

我有以下反应形式：

  newTripForm = this.formBuilder.group({
    name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(3)])),
    startDate: new FormControl('', Validators.required),
    endDate: new FormControl(''),
  });

如何添加强制 endDate 大于 startDate 的验证器？另外，有没有办法检查 startDate 和 endDate 是日期？我没有找到任何验证器？

非常感谢（对于菜鸟问题表示抱歉）

【问题讨论】：

为日期编写自定义验证器。而不是对日期使用文本输入，而是使用库。见this例子

标签： angular validation angular-validation angular-validator

【解决方案1】：

到目前为止，您使用的验证器是 FormControl-validators。他们验证单个FormControl。您还可以为自己编写一个验证器来验证FormArray 或FormGroup。验证器看起来像这样：

dateOrderValidator(formGroup: FormGroup): ValidationErrors | null {
  const startDate = formGroup.controls['startDate']?.value;
  const endDate = formGroup.controls['endDate']?.value;
  // validate date-strings
  // catch missing values
  if (Date.parse(startDate).getTime() >= Date.parse(endDate).getTime)) {
    // return an appropriate error
  }
}

表单生成器

FormBuilder 的主要目的是为我们节省一些样板文件。代替 name: new FormControl(...) 我们可以写

name: ['initialValue', [<synchronous validators>], [<asynchronous validators]]

甚至更少（如果我们没有验证器）：

name: 'initialValue'

【讨论】：

虽然“验证日期字符串”应该是字段验证器的职责，而不是表单组验证器。
正确。我的意思是：不要使用Date.parse().getTime()，除非确保您可以解析给定的字符串。

【解决方案2】：

如果您的控件是正常的日期输入，这将完成这项工作，并且如果您的控件是自定义类型（如 ngBootstrap 日期选择器“就像我的情况一样”），您可以格式化值

export class DateValidators {
  static greaterThan(startControl: AbstractControl): ValidatorFn {
    return (endControl: AbstractControl): ValidationErrors | null => {
      const startDate: Date = startControl.value;
      const endDate: Date = endControl.value;
      if (!startDate || !endDate) {
        return null;
      }
      if (startDate >= endDate) {
        return { greaterThan: true };
      }
      return null;
    };
  }
}

用法

const startControl = this.formBuilder.control('');
const endControl = this.formBuilder.control('', [DateValidators.greaterThan(startControl)]);

【讨论】：