Stop reactive form submit if validation fails in angular

Question

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.

The code that I tried is:

Typescript:

    onSubmit(){
this.submitted=true;
if(this.formName.invalid){
return;
}
if(this.submitted){
this.showModal=false
}
}

Please guide me about what I am missing.

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.

Answer 1

you have to validate your form before you submit. There are two ways to do this:

In Component.ts

onSubmit() {
   if(this.form.valid) {
     /* write your code here */
   }
}

In Component.html

<button type="submit" class="btn btn-default" [disabled]="!form.valid">Submit</button>