角度材料 - mat-error 不显示输入字段的错误消息

Posted 2023-03-13

【中文标题】角度材料 - mat-error 不显示输入字段的错误消息

【英文标题】：angular material - mat-error not displaying the error message for the input field

【发布时间】：2019-05-11 00:42:36

【问题描述】：

场景 - 带有表单数组的反应式表单。表单中的每个字段都有一个Required 验证。表单数组本身具有 minlength(1) 和 maxlength(3) 的验证。在表单数组中添加 4 个值会使表单无效并在最后一个值字段中显示错误消息 - Maximum 3 values can be added。

代码开启 - stackblitz

问题 - 即使 mat-error 的 *ngIf 中的条件为真，它也不显示该字段的错误（即使触摸该字段）。

复制步骤 -

打开堆栈闪电战 在值字段中输入 1 并单击 + 按钮 在新的值字段中输入 2 并单击 + 按钮 在新的值字段中输入 3 并单击 + 按钮 在新的值字段中输入 4。期望在最后一个值字段中显示错误Maximum 3 values can be added。

【参考方案1】：

您需要为您的FormArray 创建一个自定义验证器。在此处查看示例。

https://stackblitz.com/edit/angular-qx5ttm

【讨论】：

我认为这里不需要自定义验证器。因为 Validators.maxLength() 可以添加到表单数组中。而且我看到它工作正常，因为 ngIf 条件正在更改为 true，但这里的问题是，即使它为 true，mat-error 也不会显示。

由于控件处于pristine (untouched) 状态，因此未显示错误。如果您更改该值并再次删除它，您将收到两个错误。一个用于必需，另一个用于数组的 maxLength。

不是因为原始状态。因为如果我在第 4 个字段中输入一个值，则满足必填字段验证，但 maxLength 验证失败，所以它仍应显示 maxLength 错误消息。目前没有发生这种情况

摘自 material.angular.io 文档Error messages can be shown under the form field underline by adding mat-error elements inside the form field. Errors are hidden initially and will be displayed on invalid form fields after the user has interacted with the element or the parent form has been submitted. 参考链接：material.angular.io/components/form-field/overview。因此，仅当输入字段有错误时才会显示错误。在您的情况下，该字段仅对 required 进行验证。所以它不会显示与FormArray相关的错误。

所以基本上角度材料不允许我将错误消息附加到输入字段，除非该字段无效。所以我想要达到的目标是不可能的。在这种情况下，我将不得不单独显示错误消息并且不能与任何输入字段一起显示（因为验证是在表单数组上而不是表单控件上）