Angular 8Angular 9Angular7Bootstrap 4

Angular 9 – how to reset form after submit?

Angular 9 - how to reset form after submit?
Views

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 9 – how to reset form after submit?

Angular 9 reset reactive form validation

Story behind this post:

I was doing simple for submit in my Angular 9 application but after form submission when I did reset my form then form reset worked fine but validation occurred again and this thing made me surprised, but after lots of trying and searching, I have successfully found the solution for this and that solution, I am going to share.

Here is the code and please follow carefully:

1. Here is my app.component.html file code:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" placeholder="Enter name" id="name" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
  <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
      <div *ngIf="f.name.errors.required">Name is required</div>
  </div>
  </div>
  <div class="form-group">
    <label for="pwd">Email:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
  <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
    <div *ngIf="f.email.errors.required">Email is required</div>
      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
   </div>
  </div>
  <div class="form-group">
    <label for="phone">Phone:</label>
    <input type="text" class="form-control" placeholder="Enter phone" id="phone" formControlName="phone" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
  <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
      <div *ngIf="f.phone.errors.required">Phone is required</div>
  </div>
  </div>
  
  <button type="submit"  class="btn btn-primary mb-3">Submit</button>
</form>

2. Here is my app.component.ts file code:

...
import { FormGroup, FormControl, Validators} from '@angular/forms';
...

export class AppComponent {
...
registerForm: FormGroup;
submitted = false;

get f() { return this.registerForm.controls; }

//Form Submit Function
onSubmit() {
  
        this.submitted = true;
        // stop here if form is invalid
        if (this.registerForm.invalid) {
    
              return;
        }
  else{

            // Form success submition. THis will reset form and form validations

            this.registerForm.reset();
      this.registerForm.get('name').clearValidators();
      this.registerForm.get('name').updateValueAndValidity();
      this.registerForm.get('email').clearValidators();
      this.registerForm.get('email').updateValueAndValidity();
      this.registerForm.get('phone').clearValidators();
      this.registerForm.get('phone').updateValueAndValidity();
        }
       
        ngOnInit(): void {
            // Form set Validations
            this.registerForm = this.formBuilder.group({
            name: ['', Validators.required],
            phone: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]]
        });
  }
...

}

Here it is and if you have any kind of query then please do comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL