大佬教程收集整理的这篇文章主要介绍了为什么mat-error不会显示在带有自定义全局验证器的角度材质6中的mat-form字段内,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
不工作代码:
<mat-form-field> <input maTinput 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> </mat-form-field>
工作正常:
<input maTinput type="time" formControlName="ToTime"/> </mat-form-field> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>
有人解释了为什么不在该控制范围内工作.
现场演示:
stackblitz
但是,幸运的是,您可以使用绑定到mat-input元素的errorStateMatcher输入属性来覆盖此行为.
用法:
<mat-form-field> <input maTinput [errorStateMatcher]="matcher" [matDatepicker]="picker" placeholder="Choose a Start date" formControlName="FromDate" [min]="minFromDate" [max]="maxToDate" > <mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error >Please provide a valid Fromdate</mat-error> </mat-form-field>
因此,您必须以这种方式在代码中实现ErrorStateMatcher.
export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null,form: FormGroupDirective | NgForm | null): Boolean { const isSubmitted = form && form.submitted; return (control && control.invalid); } }
在组件中为ErrorStateMatcher类添加一个新的对象匹配器,它将作为[errorStateMatcher] =“matcher”的值
@H_499_9@matcher = new MyErrorStateMatcher();
我还在你的分叉stackblitz中添加了相同的代码
建议:
您无需为指定formControlName的mat-error提供ngIf条件.它将根据其所在的mat-form字段自动考虑.
以上是大佬教程为你收集整理的为什么mat-error不会显示在带有自定义全局验证器的角度材质6中的mat-form字段内全部内容,希望文章能够帮你解决为什么mat-error不会显示在带有自定义全局验证器的角度材质6中的mat-form字段内所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。