Angular 7 表单验证和显示错误消息 [英] Angular 7 Form Validation and Display error message

问题描述

请看我在 Stackblitz 中的简单表单

Please look my simple form in Stackblitz

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

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

My form contains 2 checkboxes if I select one of the checkboxes it will populate one textbox. In my scenario, I have 2 checkboxes and 2 text boxes and one submit button.

注意-就我而言，我有 n 个复选框和子问题

NOTE- in my case i have n number of checkbox and child questions

验证包括 -> 2 个文本框是必需的

Validation includes -> 2 textbox are mandatory

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

If the user submits the form without entering textbox it will show the error message.

1. 选中checkbox1，文本框会出现，没有任何错误信息

屏幕截图

2.然后提交表单它会显示错误.那没关系.

2.then submit the form it will show the error. that is fine.

屏幕截图

1. 选中checkbox2，如果没有点击提交按钮，新的文本框将再次出现并显示错误信息.

屏幕截图

屏幕截图

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

But I WANT that second error message display only if the user hit submit button again.

谢谢

推荐答案

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

Not sure if I got your point, but try this:

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

add some variable submitCount: number to your component; then everytime you click the submit button, just increase this counter; and finally add to the ngIf of your 2nd textbox 'submitCount > 1 &&' and this should be it?

这篇关于Angular 7 表单验证和显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！