Попытка сбросить форму при нажатии кнопки в angular

Я создаю базовое приложение регистрации пользователя с базовыми учетными данными. Я пытаюсь сбросить форму, когда нажимаю кнопку отмены. Однако я не могу этого сделать. Я написал функцию сброса, но почему-то она не вызывается. Не могу понять, что не так. Пожалуйста, помогите. Заранее спасибо

Мой код ТС:

 ngOnInit()
  {

    this.addForm = this.formBuilder.group({
      id: [],
      userName: ['', Validators.required],
      password:new FormControl( '',[ Validators.required]),
      passwordAgain: new FormControl('',[ Validators.required]),
      userRole:['',Validators.required],

    },{ validator: RepeatPasswordValidator });
  }
  onSubmit() {
    if (this.addForm.valid)
    {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {

        //this.router.navigate(['adduser']);
      });
      this.snackBar.open("message", "action", {
        duration: 2000,
      });
      alert("User created");

  }

  window.location.reload();
}
  changeClient(value) {

}
resetForm()
{
  this.addForm.reset();
}

Вот мой шаблон:

<div  style = "height: 100vh" fxLayout = "column" fxLayoutAlign = "center center" >
  <mat-toolbar>
    <span>Registration</span>
  </mat-toolbar>
    <mat-card>
        <mat-card-content>

    <form [formGroup] = "addForm" class = "login-form" (ngSubmit) = "onSubmit()">
    <div class = "form-group">
        <mat-form-field class = "example-full-width">

      <input matInput type = "text" formControlName = "userName" placeholder = "userName" name = "userName" class = "form-control" id = "userName">
        </mat-form-field>
    </div>

    <div class = "form-group">
        <mat-form-field class = "example-full-width">

      <input matInput type = "password" formControlName = "password" placeholder = "Password" name = "password" class = "form-control" id = "password">
      <mat-error *ngIf = "addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
    </mat-form-field>
    </div>
    <div class = "form-field">
        <mat-form-field>
        <input matInput formControlName = "passwordAgain" placeholder = "Confirm the password" type = "password" [errorStateMatcher] = "passwordsMatcher">
        <mat-error *ngIf = "addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
        </mat-form-field>
    </div>
    <mat-form-field>
        <mat-select placeholder = "Roles" formControlName = "userRole" id = "userRole" (selectionChange) = "changeClient($event.value)" [(value)] = "selected">
          <mat-option value = "Admin">Admin</mat-option>


        </mat-select>
      </mat-form-field>

      <div class = "container" style = "margin: 12px" fxLayout = "row" fxLayoutAlign = "center center">


    <button mat-raised-button  color = "primary">Create</button>
    <button mat-raised-button (click)= 'resetForm()' color = "primary">Cancel</button>


      </div>
  </form>


  </mat-card-content>
    </mat-card>
</div>