模板驱动的“起始日期”和“截止日期”表单验证

时间:2018-08-20 09:34:13

标签: javascript html angular

我正在尝试以模板驱动的形式添加对自从日期和自从日期控件的验证。我如何验证它们,例如“自从日期应大于自到日期”,反之亦然。 另外,我正在考虑在整个应用程序中重用此验证,以用于不同的日期和日期控件。

3 个答案:

答案 0 :(得分:1)

因此,如果您使用临时模板驱动的表单,则日期输入上将具有ngModel。为了进行验证,您可以检查日期模型的值并进行验证。要知道您的模型是否更改,可以使用ngModelChange。

答案 1 :(得分:1)

可以使用<>来比较JS Date

fromDate = new Date() // today
toDate = new Date(fromDate.valueOf() + 60*60*24) // tomorrow

function toDateIsLater(fromDate, toDate) {
  return toDate > fromDate
}

console.log(toDateIsLater(fromDate, toDate))

答案 2 :(得分:1)

创建一个带有两个窗体控件的函数。比较日期,并在出现错误时设置表单控件的错误:

compareDates(from: FormControl, to: FormControl) {
  const startDate: Date = ConvertYourFormValueToValidDate(from.value);
  const endDate: Date = ConvertYourFormValueToValidDate(to.value);

  if (startDate.getTime() > endDate.getTime()) {
    from.setErrors({ ...from.errors, 'aboveEnd': true });
  } else if (startDate.getTime() > endDate.getTime()) {
    to.setErrors({ ...to.errors, 'belowStart': true });
  }
}