title: Trying to reset form on button click in angular
body: <p>I am creating a basic sample user registration application with basic  credentials.I am trying to reset the form when I click on the cancel button.However I am unable to do so. I've written the reset function but somehow it's not being called.I can't figure out what's wrong.Please help.Thanks in advance</p>
  
  <p>My ts code:</p>
  
  <pre><code> 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 =&gt; {
  
          //this.router.navigate(['adduser']);
        });
        this.snackBar.open("message", "action", {
          duration: 2000,
        });
        alert("User created");
  
    }
  
    window.location.reload();
  }
    changeClient(value) {
  
  }
  resetForm()
  {
    this.addForm.reset();
  }
  </code></pre>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;div  style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" &gt;
    &lt;mat-toolbar&gt;
      &lt;span&gt;Registration&lt;/span&gt;
    &lt;/mat-toolbar&gt;
      &lt;mat-card&gt;
          &lt;mat-card-content&gt;
  
      &lt;form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()"&gt;
      &lt;div class="form-group"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
  
        &lt;input matInput type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control" id="userName"&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
  
        &lt;input matInput type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password"&gt;
        &lt;mat-error *ngIf="addForm.controls.password.hasError('required')" &gt;Passwords can't be empty&lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class="form-field"&gt;
          &lt;mat-form-field&gt;
          &lt;input matInput formControlName="passwordAgain" placeholder="Confirm the password" type="password" [errorStateMatcher]="passwordsMatcher"&gt;
          &lt;mat-error *ngIf="addForm.hasError('passwordsNotEqual')" &gt;Passwords are different. They should be equal!&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;mat-form-field&gt;
          &lt;mat-select placeholder="Roles" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" [(value)]="selected"&gt;
            &lt;mat-option value="Admin"&gt;Admin&lt;/mat-option&gt;
  
  
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  
        &lt;div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center"&gt;
  
  
      &lt;button mat-raised-button  color="primary"&gt;Create&lt;/button&gt;
      &lt;button mat-raised-button (click)= 'resetForm()' color="primary"&gt;Cancel&lt;/button&gt;
  
  
        &lt;/div&gt;
    &lt;/form&gt;
  
  
    &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>