How to apply validation in angular 7 reactive forms on submit?

Question

TS Code:

onSubmit(){
 if(this.Registration.invalid){
   return;
  }
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

}

HTML Code:

<form class="admin-form" [formGroup]="Registration" (ngSubmit)="onSubmit()" id="Registration">
    <mat-form-field appearance="outline">
        <mat-label>username</mat-label>
        <input matInput class="matInput" placeholder="username" type="text" formControlName="username">
    <mat-icon matSuffix>person</mat-icon>
      <mat-error *ngIf="Registration.controls['username'].invalid && (Registration.controls['username'].dirty ||Registration.controls['username'].touched)">
        <div *ngIf="Registration.controls['username'].errors.required">
          username is required.
        </div>
        <div *ngIf="Registration.controls['username'].errors.pattern">
          username must be characters and special characters.
        </div>
       </mat-error>
  </mat-form-field>
  <button mat-icon-button type="submit" value="submit">
    <i class="material-icons">send</i>
  </button>
</form>

Angular 7 reactive forms validation on the submit button, I want if there any errors or input field empty, then the form should be not submitted successfully.

Can you share your code?

Tanmay_vijay
– Tanmay_vijay

2019-03-29 12:50:35 +00:00
Commented Mar 29, 2019 at 12:50 — Tanmay_vijay
– Tanmay_vijay, Commented Mar 29, 2019 at 12:50

Prashant Pimpale · Accepted Answer · 2019-03-29 13:35:18Z

1

Remove ! because it returns true when the form in Invalid i.e it has errors and returns false when then the form is Valid like:

if (this.Registration.invalid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

But it's better to use form.valid to check the form Validation, explain here

So the change with valid is use !:

if (!this.Registration.valid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

Another way and Recommended:

You can also disable the button itself if the form is invalid so until the form gets valid the submit button will be disabled for ex:

[disabled]="!Registration.valid" OR [disabled]="Registration.invalid"

with button:

<button mat-icon-button type="submit" [disabled]="!Registration.valid" value="submit">
  <i class="material-icons">send</i>
</button>

Stackblitz_Example

edited Mar 29, 2019 at 13:35

answered Mar 29, 2019 at 13:14

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

How to apply validation in angular 7 reactive forms on submit?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related