Essayer de réinitialiser le formulaire en cliquant sur le bouton en angle

Je crée un exemple d'application d'enregistrement d'utilisateur de base avec des informations d'identification de base. J'essaie de réinitialiser le formulaire lorsque je clique sur le bouton d'annulation, mais je ne peux pas le faire. J'ai écrit la fonction de réinitialisation, mais d'une manière ou d'une autre, elle n'est pas appelée.Je ne peux pas comprendre ce qui ne va pas.Veuillez aider.Merci d'avance

Mon code ts:

<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>

Voici mon modèle:

 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();
}