1

Please look my simple form in Stackblitz

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

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.

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

Validation includes -> 2 textbox are mandatory

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

STEP to Recreate

  1. check the checkbox1, textbox will appear without any error message

screen shot

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

screen shot

  1. check the checkbox2, again new textbox will appear with error message without clicking submit button.

screen shot

screen shot

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

Thanks

Improve this question
5
  • I'm not sure I get what your question is. You chose to display the error message if the form has been submitted: || angularForm.submitted. So, since the form has been submitted, the error message is displayed. If you don't want that, then don't show the error message when the form has been submitted. Commented Aug 2, 2019 at 6:05
  • What the questions is? Commented Aug 2, 2019 at 6:13
  • i want to show the error message only if the field is invalid while submit the form 2nd time. but in my case error is displaying while populating the textbox. how to handle this case. please check the application in stackblitz STEP to Recreate Commented Aug 2, 2019 at 7:22
  • STEP to Recreate 1. check the checkbox1, textbox will appear without any error message, then submit the form it will show the error. that is fine. 2. check the checkbox2, again new textbox will appear with error message. But I WANT that second error message display only if the user hit submit button in second time. Commented Aug 2, 2019 at 7:31
  • please try this in stackblitz Commented Aug 2, 2019 at 7:32

1 Answer 1

Reset to default
0

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

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

please check my prototype in stackblitz stackblitz.com/edit/angular-et9uww. my question is I have to validate only available fields in the form not for upcoming field. In my scenario all fields are validated at one submit.
STEP to Recreate check the checkbox1, textbox will appear without any error message, then submit the form it will show the error. that is fine. check the checkbox2, again new textbox will appear with error message. But I WANT that second error message display only if the user hit submit button in second time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.