Categories

Tuesday, December 3, 2024
#919814419350 therichposts@gmail.com
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 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>
  </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

therichpost
the authortherichpost
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 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

7 Comments

Leave a Reply

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