Monday, May 20, 2024
Angular 8Angular 9Angular7Bootstrap 4

Angular 9 – how to reset form after submit?

Angular 9 - how to reset form after submit?

Hello to all, welcome again on 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 && }">
  <div *ngIf="submitted &&" class="invalid-feedback">
      <div *ngIf="">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 && }">
  <div *ngIf="submitted &&" class="invalid-feedback">
    <div *ngIf="">Email is required</div>
      <div *ngIf="">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 && }">
  <div *ngIf="submitted &&" class="invalid-feedback">
      <div *ngIf="">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 ={
            name: ['', Validators.required],
            phone: ['', Validators.required],
            email: ['', [Validators.required,]]


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


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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