Angular：mat-error 不适用于自定义验证器

Question

当 DatePicker 结束日期输入小于开始日期输入时，我无法正确实现 mat-error 样式更改。该按钮能够通过禁用自身来识别输入无效，但在“end_date”时不会发生错误样式更改。

代码：

    <mat-error *ngIf="userAddressValidations.hasError('validator')">
      End date must be greater than start date.
    </mat-error>

我的目标是在自定义验证器检测到错误时显示此错误消息。

这是我的完整示例代码：

Stackblitz

Answer 1

mat-error 仅适用于控件中的错误，不适用于 formGroup 中的错误。

但在更改您的 dateCheck 以返回具有属性“验证器”而不是“日期”的对象之前

function dateCheck(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if (
      control.value.end_date &&  //<--check only if has value, not !==undefined
      (isNaN(control.value.end_date) ||
        control.value.end_date < control.value.start_date)
    ) {
      return { validator: true };  //<--see that it's "validator"
    }
    return null;
  };
}

然后创建一个customErrorMatcher

export class DateEndMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    //see the comparision
    return !!(control && (control.invalid || form.invalid) && (control.dirty || control.touched || isSubmitted));
  }
}

并在您的 .ts 中声明

endDateMatcher = new DateEndMatcher();

并在.html中使用

 <input matInput [matDatepicker]="picker2" formControlName='end_date' 
        [errorStateMatcher]="endDateMatcher">

你可以在你的forked stackblitz看到

注意：在新材料角度中，您有一个范围日期选择器

更新还有另一种使用 SetErrors 的方法

function dateCheck(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if (
      control.value.end_date &&
      (isNaN(control.value.end_date) ||
        control.value.end_date < control.value.start_date)
    ) {
      //indicate that setErrors
      control.get('end_date').setErrors({validator:true})
      return { validator: true };
    }
    if (control.value.end_date)
       control.get('end_date').setErrors(null) //<--put the setErrors to null
    return null;
  };
}