Resetting the Form

We’re going to learn about one more feature before we wrap things up with reactive forms. Sometimes it may be necessary to reset a form. There’s a function available on the form group called reset(). As you would imagine, this will reset every input in the form.

Let’s update the app.component.html template file by including a button that calls this method when clicked.

<button class="btn btn-warning btn-lg btn-block" type="button" (click)="ccForm.reset()">
  Reset
</button>

We’re listening for the click event on the button. If triggered, we’ll call the ccForm.reset() function.

One thing to note is that this is not a true reset. The reset() method will set all form control values to null. It will not use the default value you pass into the first argument. For example, let’s say the form control for the name input has a default value of John.

ccForm = new FormGroup({
  name: new FormControl('John', [
    Validators.required,
    Validators.minLength(3)
  ])
});

The reset() method will not set the input back to John. It will be set to null. This is important to understand in case you ever wonder why the input is not resetting the input to the desired value.

Below is the updated code. If you press the reset button, then the input fields should empty out regardless of their values. If you look at the log below the form, you’ll see that the form controls have been set to null.