Angular 7 表单验证和显示错误消息答案

【问题标题】：Angular 7 Form Validation and Display error messageAngular 7 表单验证和显示错误消息
【发布时间】：2026-02-23 13:15:01
【问题描述】：

请看我在 Stackblitz 中的简单表格

如果我选择其中一个复选框，我的表单包含 2 个复选框，它将填充一个文本框。在我的场景中，我有 2 个复选框、2 个文本框和一个提交按钮。

注意-在我的情况下，我有 n 个复选框和子问题

验证包括 -> 2 个文本框是强制性的

如果用户在没有输入文本框的情况下提交表单，它将显示错误消息。

重建步骤

2.然后提交它会显示错误的表单。没事儿。

但我希望仅当用户再次点击提交按钮时才显示第二条错误消息。

谢谢

【问题讨论】：

我不确定你的问题是什么。如果表单已提交，您选择显示错误消息：|| angularForm.submitted。因此，由于表单已提交，因此会显示错误消息。如果您不想这样，请不要在提交表单时显示错误消息。
问题是什么？
我只想在第二次提交表单时字段无效时才显示错误消息。但在我的情况下，填充文本框时显示错误。如何处理这种情况。请检查 stackblitz STEP 中的应用程序以重新创建
重新创建的步骤 1. 选中复选框1，文本框将出现没有任何错误消息，然后提交将显示错误的表单。没事儿。 2.选中复选框2，新的文本框将再次出现错误消息。但我希望只有当用户第二次点击提交按钮时才会显示第二条错误消息。
请在 stackblitz 中试试这个

【解决方案1】：

不确定我是否明白你的意思，但试试这个：

添加一些变量 submitCount: number 到你的组件；然后每次单击提交按钮时，只需增加此计数器；最后添加到第二个文本框 'submitCount > 1 &&' 的 ngIf 中，应该是这样吗？

【讨论】：

请在 stackblitz stackblitz.com/edit/angular-et9uww 中检查我的原型。我的问题是我必须只验证表单中的可用字段，而不是即将到来的字段。在我的场景中，所有字段都在一次提交时进行验证。
STEP to Recreate 选中复选框1，文本框将出现且没有任何错误消息，然后提交将显示错误的表单。没事儿。选中复选框2，新的文本框将再次出现错误消息。但我希望只有当用户第二次点击提交按钮时才会显示第二条错误消息。