angular / angular/components

bug(MAT-ERROR): mat error content with block element gives extra space of 16px

未关闭
#27,787 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: material/form-field P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.2.7

### Description

If the error message is rendered within a block element (we have some error message which are from a database and have a div element), an extra space is added. If this done by design, maybe it should also be mentioned in the docs?
Look at this example: https://stackblitz.com/edit/g5mias?file=src%2Fexample%2Fform-field-error-example.html

### Reproduction

StackBlitz link: https://stackblitz.com/edit/g5mias?file=src%2Fexample%2Fform-field-error-example.html
Steps to reproduce:
1. focus and blur the field

### Expected Behavior

Render the error messages directly underneath the input field

### Actual Behavior

The error messages are shown 16px below the input field

### Environment

- Angular: 16 latest
- CDK/Material: 16 latest

贡献指南

打开贡献指南

调研方向

从 src/example/form-field-error-example.html 中链接的 StackBlitz 示例开始,通过聚焦字段然后移除焦点来重现该问题。将 Angular 16 Material 的错误渲染与预期位置进行比较;当块元素的错误内容直接出现在输入框下方且没有额外的 16px 间距时,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。