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

问题描述:

请在Stackblitz中查看我的简单表单

Please look my simple form in Stackblitz

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

如果我选择一个复选框,则我的表单将包含2个复选框,它将填充一个文本框.在我的方案中,我有2个复选框和2个文本框以及1个提交"按钮.

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. 选中复选框1,文本框将出现,没有任何错误消息

屏幕截图

2.然后提交表格将显示错误.那样就好.

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

屏幕截图

  1. 选中复选框2,再次出现新文本框,并显示错误消息,而无需单击提交按钮.

屏幕截图

屏幕截图

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

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:数字;然后,每当您单击提交"按钮时,只需增加此计数器即可;最后添加到第二个文本框的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?