首页 / JAVASCRIPT / javascript – Angular材料mat-error无法显示消息

javascript – Angular材料mat-error无法显示消息

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Angular材料mat-error无法显示消息，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2360字，纯文字阅读大概需要4分钟。

内容图文

我有2个日期时间选择器,endDate不能小于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中：

<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”,则不显示该消息.我尝试改变“小”

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

信息很好.请告诉我如何使用mat-error

解决方法:

mat-error仅在FormControl无效时显示,但您在表单组上进行了验证.所以在这种情况下你需要使用ErrorStateMatcher

在你的情况下,它看起来像这样：

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(将所有值设置为表格)

在组件中标记errorstatematcher：

matcher = new MyErrorStateMatcher();

至于您的自定义验证器,您不需要解析日期,只需检查结束日期是否小于开始日期：

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

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

<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

内容总结

以上是互联网集市为您收集整理的javascript – Angular材料mat-error无法显示消息全部内容，希望文章能够帮你解决javascript – Angular材料mat-error无法显示消息所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/704730.html

来源：【匿名】