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

查看:373
本文介绍了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?

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆