title: Not able to reset the form with mat chips and mat auto-complete - Angular Reactive forms
body: <p>I'm using material design for creating a form where I'm using input field with mat-chips and mat-autocomplete, but when I tried to reset the form using form.reset(); it's not working; </p>
  
  <p>HTML</p>
  
  <pre><code> &lt;mat-form-field class="demo-chip-list"&gt;
    &lt;mat-chip-list #chipList2&gt;
    &lt;mat-chip *ngFor="let state of selected"
     [selectable]="selectable"
     [removable]="removable"
     (remove)="remove(state)"&gt;
     {{state}}
     &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
    &lt;/mat-chip&gt;
    &lt;input #input placeholder="Pick a state..."
     [matChipInputFor]="chipList2"
     [matChipInputAddOnBlur]="addOnBlur"
     (matChipInputTokenEnd)="add($event)"
     [matAutocomplete]="auto"
     [formControl]="stateCtrl"/&gt;
    &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="add($event); 
     input.value = ''"&gt;
     &lt;mat-option *ngFor="let state of filteredStates | async" 
      [value]="state"&gt;
      {{ state }}
      &lt;/mat-option&gt;
     &lt;/mat-autocomplete&gt;
    &lt;/mat-chip-list&gt;
    &lt;/mat-form-field&gt;
   &lt;button mat-button (click)="clear()"&gt;clear&lt;/button&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>  color =  'primary';
    selectable = true;
    removable = true;
    addOnBlur = true;
    @ViewChild('auto') auto: ElementRef; 
    states = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas'
    ];
    stateCtrl: FormControl;
    filteredStates: any;
    selected: string[] = [
    'Illinois', 'Missouri'
     ];
  
   constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges.pipe(
      startWith(null),
    map((name: string) =&gt; this.filterStates(name))
    );
    }
   filterStates(val: string) {
   const matches = val ? this.states.filter(s =&gt; new RegExp(`^${val}`, 
   'gi').test(s))
    : this.states;
    return matches.filter(x =&gt; !this.selected.find(y =&gt; y === x));
   }
  
   add(event: MatAutocompleteSelectedEvent): void {
    if (!event.option) { return; }
   const input = event.source;
   const value = event.option.value;
  
    if ((value || '').trim()) {
     this.selected.push(value.trim());
    this.stateCtrl.setValue('');
    }
   } 
   remove(state: string): void {
   const index = this.selected.indexOf(state);
  
   if (index &gt;= 0) {
    this.selected.splice(index, 1);
   }
   }
   clear(){
   this.stateCtrl.setValue('');
   }
  </code></pre>
  
  <p>Even when I try to reset using form.controlName.setValue('');
  then also it's not working.</p>
  
  <p>stackblitz Link: <a href="https://stackblitz.com/edit/angular-material2-issue-jn5dzm" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material2-issue-jn5dzm</a></p>