title: How to reset reactive Angular Material form in Angular?
body: <p>I am trying to reset a reactive form created by Angular Material (except the checkbox). I've tried to use <code>this.formdata.reset()</code>. It is resetting the form but it's making it <code>touched</code>. So I used <code>this.formdata.markAsUntouched()</code> but it's not making anything different. Here is my code below:</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { FormBuilder, Validators, FormArray, FormControl, NgForm } from '@angular/forms';
  
  export class FormComponent implements OnInit{
  
    public states = [];
  
    Gender: model[] = [{value: 'M', option: 'Male'}, {value: 'F', option: 'Female'}];
    Vehicles: model[] = [{value: '2 wheelers', option: '2 wheelers'}, {value: '4 wheelers', option: '4 wheelers'}];
  
    constructor(private _statesService: StatesService, private fb: FormBuilder) {}
  
    // Initialize each field of form with FormBuilder
    formdata = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]], phone: ['', [Validators.required, Validators.minLength(12)]],
      gender: ['', Validators.required], vehicles: new FormArray([],Validators.required)
    });
  
    // Retreiving values of form field
    get Name()
    {return this.formdata.get('name');}
  
    get Phone()
    {return this.formdata.get('phone');}
  
    get Vehiclesmethod()
    {return this.formdata.get('vehicles');}
  
    get Genderval()
    {return this.formdata.get('gender');}
  
    onCheckChange(event) {
      const formArray: FormArray = this.formdata.get('vehicles') as FormArray;
  
      /* Selected */
      if(event.target.checked){
        // Add a new control in the arrayForm
        formArray.push(new FormControl(event.target.value));
      }
      /* unselected */
      else{
        // find the unselected element
        let i: number = 0;
  
        formArray.controls.forEach((ctrl: FormControl) =&gt; {
          if(ctrl.value == event.target.value) {
            // Remove the unselected element from the arrayForm
            formArray.removeAt(i);
            return;
          }
          i++;
        });
      }
    }
    @ViewChild('f') private f: NgForm;
    // Submit method
    onSubmit()
    {
      if(this.formdata.invalid){return ;}
      console.log(this.formdata.value);
      alert('submitted');
      // Reset form
      this.formdata.reset();
      this.formdata.markAsUntouched();
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="formdata" (ngSubmit)="onSubmit()" #f="ngForm"&gt; 
              &lt;div class="form-row"&gt;
                  &lt;div class="col"&gt;
                      &lt;p&gt;
                          &lt;mat-form-field appearance="outline" class="field_size"&gt;
                              &lt;mat-label&gt;Name&lt;/mat-label&gt;
                              &lt;input type="text" matInput formControlName="name"&gt;
                              &lt;mat-error *ngIf="Name.errors?.required"&gt;Name required&lt;/mat-error&gt;
                              &lt;mat-error *ngIf="Name.errors?.minlength"&gt;Minimum 3 characters required&lt;/mat-error&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                      &lt;p&gt;
                          &lt;mat-form-field appearance="outline" class="field_size"&gt;
                              &lt;mat-label&gt;Phone Number&lt;/mat-label&gt;
                              &lt;input type="tel" matInput appPhoneMask formControlName="phone" maxlength="12"&gt;
                              &lt;mat-error *ngIf="Phone.errors?.required"&gt;Phone number required&lt;/mat-error&gt;
                              &lt;mat-error *ngIf="Phone.errors?.minlength"&gt;Number is less than 10 digits&lt;/mat-error&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-row"&gt;
                  &lt;div class="col"&gt;
                      &lt;label&gt;Gender&lt;/label&gt;&lt;br&gt;
                      &lt;mat-radio-group formControlName="gender"&gt;
                          &lt;mat-radio-button *ngFor="let g of Gender; let i = index" [value]="g.value"&gt;{{ g.option }}&lt;/mat-radio-button&gt;
                      &lt;/mat-radio-group&gt;&lt;br&gt;
                      &lt;small *ngIf="Genderval.errors?.required" style="color: red;"&gt;Please select Gender&lt;/small&gt;
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                      &lt;label&gt;Vehicles&lt;/label&gt;&lt;br&gt;
                      &lt;div class="form-inline"&gt;
                          &lt;span class="custome-control custom-checkbox mr-sm-2" *ngFor="let v of Vehicles,let i=index"&gt;
                              &lt;input type="checkbox" class="custom-control-input" id="{{i}}" [value]="v.value" (change)="onCheckChange($event)"&gt;
                              &lt;label for="{{i}}" class="custom-control-label"&gt;{{v.option}}&lt;/label&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-row"&gt;
                  &lt;button mat-flat-button color="primary" type="submit" class="button" [disabled]="!formdata.valid"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>NOTE:</strong> The value is getting emptied for every fields in the <code>FormBuilder</code> part and also in the view part. But the checkbox in view part it's showing still checked.</p>
  
  <p>Please help me out I've tried many ways but nothing is working fine.</p>