How to Reset a Reactive Form after Submission in Angular?

By default, a reactive form does not reset after its submission which might result in a bad user experience. So, we have to explicitly reset the form as soon as the user submits it.

Which can very easily be done with the help of the FormGroup.reset() method. The reset() method resets all the form controls to their default values(empty in our case).

Here is the implementation:

import { FormBuilder, Validators } from '@angular/forms';

export class UserLandingComponent implements OnInit {

  userForm: any;

  constructor(private formBuilder: FormBuilder) {
    this.userForm = this.formBuilder.group({
      name: ['', Validators.required],
      age: ['', Validators.required],
      email: ['', Validators.required]
    });
  }
  ngOnInit(): void { }

  submitForm() {
    // Reset form after submission
    this.userForm.reset();
  }
}

The reset() method not only lets you reset the form controls to their initial values but you can also set them to some custom values.

The userForm in the following example will set the name, age, and email fields to ‘John Doe’, 23 and ‘johndoe@gmail.com’ instead of making them empty.

submitForm() {
    // Reset form to custom values
    this.userForm.reset({
      name: 'John Doe',
      age: 23,
      email: 'johndoe@gmail.com'
    });
}