title: Stop reactive form submit if validation fails in angular
body: <p>My last problem in this project is that once all the input fields are empty , partially filled or invalid and if the user clicks the submit button  by mistake the invalid data from the input field gets added to the main table.</p>
  <p>The code that I tried is:</p>
  <p>Typescript:</p>
  <pre><code>    onSubmit(){
  this.submitted=true;
  if(this.formName.invalid){
  return;
  }
  if(this.submitted){
  this.showModal=false
  }
  }
  </code></pre>
  <p>Please guide me about what I am missing.</p>
  <p>Edit 1:As suggested, I have already inserted all the required validations and they are working perfectly fine for all the input fields. My issue is that the invalid input data also gets added by default to the output if the user SUBMITS the button by mistake.
  Please  guide accordingly.</p>