角度材料mat-error无法显示消息 [英] Angular material mat-error cannot show message

问题描述

我有2个日期时间选择器，endDate不能小于startDate

I have 2 datetime picker, endDate cannot be less than startDate

endDateAfterOrEqualValidator(formGroup): any {
    var startDateTimestamp: number;
    var endDateTimestamp: number;
    startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
    endDateTimestamp = Date.parse(formGroup.controls['endDateForm'].value);
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
  }

html中的

：

in html:

<mat-form-field>
    <input matInput  name="endDate" id="endDate" formControlName="endDateForm" [(ngModel)]="endDate" [matDatepicker]="toDatePicker"
    placeholder="To Date">
    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
    <mat-datepicker disabled="false" #toDatePicker></mat-datepicker>
    <mat-error *ngIf="trainingDetail.hasError('endDateLessThanStartDate')">Not valid<mat-error>
</mat-form-field>

mat-error，消息不显示。我尝试改变小

with "mat-error", the message does not display. I try to change by "small"

<small *ngIf="trainingDetail.hasError('endDateLessThanStartDate')">Not valid</small>

信息良好。请告诉我如何使用mat-error

the message well. Please advice me how to using mat-error

推荐答案

一个 mat-error 仅在 FormControl 无效时显示，但您在表单组上进行了验证。因此，在这种情况下，您需要使用 ErrorStateMatcher

a mat-error only shows when a FormControl is invalid, but you have the validation on your formgroup. So in that case you need to use a ErrorStateMatcher

在您的情况下，它看起来像这样：

In your case it would look like this:

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const invalidCtrl = !!(control && control.invalid);
    const invalidParent = !!(control && control.parent && control.parent.invalid);

    return (invalidCtrl || invalidParent);
  }
}

另外值得一提的是，不建议有两个绑定，即 formControl 和 ngModel 。删除 ngModel 并改为使用表单控件。如果您稍后收到开始日期和结束日期，则可以使用 patchValue （只需设置一些值以形成）或 setValue （将所有值设置为表格）

Also worth mentioning, it's not recommended to have two bindings, i.e formControl and ngModel. Remove the ngModel and utilize the form control instead. If you receive your start date and end date at a later point, you can use patchValue (just set some values to form) or setValue (set all values to form)

在组件中标记errorstatematcher：

mark in component the errorstatematcher:

matcher = new MyErrorStateMatcher();

至于您的自定义验证器，您无需解析日期，只需检查结束日期小于开始日期：

As for your custom validator, you don't need to parse the dates, just check if end date is smaller than start date:

checkDates(group: FormGroup) {
  if (group.controls.endDate.value < group.controls.startDate.value) {
    return { endDateLessThanStartDate: true }
  }
  return null;
}

然后在模板中标记错误状态匹配器：

and then mark the error state matcher in your template:

<mat-form-field>
  <input matInput [matDatepicker]="picker2" type="text" formControlName="endDate" [errorStateMatcher]="matcher">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
  <mat-error *ngIf="myForm.hasError('endDateLessThanStartDate')">End date cannot be earlier than start date</mat-error>
</mat-form-field>

这是 StackBlitz

Here's a StackBlitz

这篇关于角度材料mat-error无法显示消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！