How to prevent form submit until all validations are passed [Angular 7]

Question

I am new to Angular. I have read this, this and this question thoroughly, But none of them are of my use as they are using jquery. My form is pretty basic registration form with only 4 basic fields. Username, password, confirm password and zipcode and a submit button. To keep this post clean and there are multiple files involved I've uploaded necessary files on github.

And I am handling validators for password and zipcode separately in

validator.ts

Validations are working perfectly fine. But the problem is that the form still gets submitted even when there are validation issues on frontend. Here is my screenshot. Please suggest me a solution or at least give some hint.

PS: I am following this youtube tutorial.

user4676340 · Accepted Answer · 2019-10-08 08:22:36Z

3

First, disable the button

<button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!form.valid">Submit</button>

Next, use a condition before submit.

  onSubmit(){
    if (!this.form.valid) return;

    // console.log(this.form.controls.zip);
    this.form.markAsTouched();
    console.log(this.form.value);

  }

Finally, add that attribute to your form :

<form [formGroup]="form" novalidate>

answered Oct 8, 2019 at 8:22

user4676340

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

5 Comments

ak.leimrey Over a year ago

+1 for adding a programmatic validation. I have seen it too often that people simply rely on disabling the button.

user4676340 Over a year ago

@ak.leimrey did you punch them in the throat ? I would have :D

Tanzeel Over a year ago

I accept this wholeheartedly. I'm so embarrassed I cant even figure out small problems. :-( Thank you @Maryannah.

ak.leimrey Over a year ago

@Maryannah I wish. Then again, it makes me feel so smart that I didn't do that and I need every bit of validation, given my limited skillset!

Tanzeel Over a year ago

@Maryannah. Yes Sir. Always.

Collectives™ on Stack Overflow

How to prevent form submit until all validations are passed [Angular 7]

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related