Html 时间验证（不时）

我已经使用[min]来验证时间（有时），其中下降时间必须大于拾取时间

我的HTML代码如下所示

取货时间
下降时间
{{labels.value}}

但这并不是在验证。有人能提出解决办法吗

谢谢。

<SCRIPT TYPE="text/JavaScript">
function validateHhMm(inputField) {
    var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);

    if (isValid) {
        inputField.style.backgroundColor = '#bfa';
    } else {
        inputField.style.backgroundColor = '#fba';
    }

    return isValid;
}

函数validateHmm（输入字段）{
var isValid=/^（[0-1]？[0-9]| 2[0-4]）：（[0-5][0-9]）（：[0-5][0-9]）？$/.test（inputField.value）；
如果（有效）{
inputField.style.backgroundColor='#bfa'；
}否则{
inputField.style.backgroundColor='#fba'；
}
返回有效；
}

---

使用此代码…

您可以执行类似于我所做的操作，以确保“开始日期”提交后出现“结束日期”。我使用角度反应形式，所以创建一个包含您的早期时间和后期时间的表单组。显然，将这种方法从日期转换到时间

下面的这段代码创建了一个名为“date”的FormGroup，其中包含FormControls“startDate”和“endDate”。应该在.ts文件中

date: this.fb.group({
   startDate: ['', [Validators.required]],
   endDate: ['', [Validators.required]],
}, {validator: this.endDateAfter}),

您可以使用顶级

元素中的

[formGroup]=“date”

和表单内输入字段中的

formControlName=“startDate”

以角度表单html访问此内容

现在，验证器是魔术发生的地方。我创建了一个validator.ts，在其中放置验证器。这是验证器的逻辑

export function EndDateAfterSelectedStartDate(group: FormGroup) {
  const startDate = group.get('startDate').value;
  const endDate = group.get('endDate').value;

  if (endDate <= startDate) {
    console.log('Invalid End Date');
  }

  return endDate > startDate ? null : { EndDateBeforeSelectedStartDate: true }
}

在类中，创建一个变量：

endDateAfter=EndDateAfterSelectedStartDate，它是上面表单控件的验证程序中使用的变量

您可以对时间对象执行相同的操作，我在这个项目中使用了内置的日期对象。
您可能还需要创建一个自定义的ErrorStateMatcher，您可以在StackOverflow的其他地方找到如何执行此操作。但是我在这里使用的是ngModel。我如何也使用FormControlName？不要使用ngModel并切换到使用FormControlNames。请点击以下链接：-
export function EndDateAfterSelectedStartDate(group: FormGroup) {
  const startDate = group.get('startDate').value;
  const endDate = group.get('endDate').value;

  if (endDate <= startDate) {
    console.log('Invalid End Date');
  }

  return endDate > startDate ? null : { EndDateBeforeSelectedStartDate: true }
}

import { EndDateAfterSelectedStartDate } from 'src/app/validators/CustomValidators';