许多开发人员都面临这个问题,即无法正确显示mat-error。通常情况下,mat-error不会占据自己的空间,而是会重叠在输入字段中。以下是可能的解决方法之一:
解决方法一:
在mat-form-field中使用fixPaddingCssClass
示例代码:
解决方法二:
使用以下CSS修改mat-form-field中mat-error的样式:
示例代码:
.mat-form-field { position: relative; }
.mat-form-field .mat-form-field-subscript-wrapper { display: flex !important; }
.mat-form-field .mat-error { display: block !important; width: 100%; position: absolute; top: calc(100% + 5px); }
.mat-form-field .mat-hint { position: absolute !important; top: calc(100% + 5px); }
这将把mat-error包含在其自己的空间中,而不是重叠在输入字段中。