反应式表单自定义验证器未在angular6中显示错误

在这个演示中，我为自定义验证器创建了一个示例表单， 在这里，我有从日期到日期，从时间到时间， 工作罚款： 对于起始日期和截止日期验证，工作正常并显示错误消息

问题: 当选择同一日期时，例如）2018年7月21日从日期到日期相同e和时间从凌晨4:00到凌晨3:00，条件得到满足，但没有显示错误消息。在执行过程中出现了一些错误，有人能帮我解决吗

在html中，我给出了验证消息，但没有显示

To Time:
<input type="time" formControlName="ToTime">
    <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

自定义验证：

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective extends Validators{

   static fromDateValidator(fdValue: FormControl) {
    const date = fdValue.value;
    console.log('x');
    if (date ===null || date==='') return { requiredFromDate: true };

  }

   static ToDateValidator(todValue: FormControl) {
    const date = todValue.value;

    if (date ===null || date==='') return { requiredToDate: true };

  }


  static timeValidator(formGroupValues: FormGroup): any {
    debugger;
    console.log(formGroupValues);
    const FromDate = formGroupValues.get('FromDate').value;
    const ToDate = formGroupValues.get('ToDate').value;
    const FromTime = formGroupValues.get('FromTime').value;
    const ToTime = formGroupValues.get('ToTime').value;

    if (FromDate.toString() === ToDate.toString()) {
      let fromTime = [];
      let toTime = [];
      fromTime = FromTime.split(':');
      toTime = ToTime.split(':');
      if (parseInt(fromTime[0]) > parseInt(toTime[0])){
      alert("condition satisfied not return any error message");
         return { InValidToTime: true };
        }
      else if (
        parseInt(fromTime[0]) === parseInt(toTime[0]) &&
        parseInt(fromTime[1]) > parseInt(toTime[1])
      ){  alert("condition satisfied not return any error message")
        return { InValidToTime: true };
      }
    }
  }
}

---

这是因为您在表单上设置了错误，而您希望在特定输入上出现错误

更改为

可修复此问题

仅供参考这不是

mat error

设计用于

---

“InValidToTime”

：删除此前导空格。可能还有其他问题，但当时我停止了阅读。@JBNizet这是粘贴时的拼写错误，我认为这是一个实现问题，但返回错误，如果您想查看演示，请参见此处

https://stackblitz.com/edit/angular-customvalidator?file=app%2Fdatepicker-概述示例.html

@为什么在移动垫子表单字段中的垫子错误时该错误不起作用

请在移动垫子表单字段后提供有效的Todate

，因为您正在使用该字段走错了路。它设计用于显示特定输入的错误。输入必须处于错误状态（无空错误），否则将隐藏mat错误。当显示错误时，它不是ngIf控制（在matInput内部），而是控制状态。这是一个强制“修复”问题的分叉示例，但这不是mat error应该如何使用。您可以阅读示例中的Angular Material文档，了解如何正确处理和显示输入错误（使用动画等）。

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective extends Validators{

   static fromDateValidator(fdValue: FormControl) {
    const date = fdValue.value;
    console.log('x');
    if (date ===null || date==='') return { requiredFromDate: true };

  }

   static ToDateValidator(todValue: FormControl) {
    const date = todValue.value;

    if (date ===null || date==='') return { requiredToDate: true };

  }


  static timeValidator(formGroupValues: FormGroup): any {
    debugger;
    console.log(formGroupValues);
    const FromDate = formGroupValues.get('FromDate').value;
    const ToDate = formGroupValues.get('ToDate').value;
    const FromTime = formGroupValues.get('FromTime').value;
    const ToTime = formGroupValues.get('ToTime').value;

    if (FromDate.toString() === ToDate.toString()) {
      let fromTime = [];
      let toTime = [];
      fromTime = FromTime.split(':');
      toTime = ToTime.split(':');
      if (parseInt(fromTime[0]) > parseInt(toTime[0])){
      alert("condition satisfied not return any error message");
         return { InValidToTime: true };
        }
      else if (
        parseInt(fromTime[0]) === parseInt(toTime[0]) &&
        parseInt(fromTime[1]) > parseInt(toTime[1])
      ){  alert("condition satisfied not return any error message")
        return { InValidToTime: true };
      }
    }
  }
}