Angular 9 – how to reset form after submit?

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

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.

Angular14 came and Angular 15 will come soon and if you are new then you must check below link:

1. Angular 14 Tutorials

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