Home Angular 8 Angular 9 – how to reset form after submit?

Angular 9 – how to reset form after submit?

by therichpost
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?

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.

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 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 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>
  <button type="submit"  class="btn btn-primary mb-3">Submit</button>

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) {

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

        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.


Thank you

Related Articles


Omprakash June 12, 2020 - 7:04 am

Hi, Ajay I using Angular 9 and I am getting an error that form.reset() is not a function, after submitting my form

Ajay Malhotra June 12, 2020 - 7:13 am

Did you follow my complete tutorial. Thanks

someone May 16, 2022 - 7:37 am

thank you ,issue resolved

someone May 16, 2022 - 7:38 am

thank you ,issue resolved. . .

therichpost May 16, 2022 - 12:15 pm


Berbeitos November 7, 2022 - 5:50 am

This works perfectly. Thank you.

therichpost November 7, 2022 - 7:48 am

Great and thanks.


Leave a Comment

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