CODEWITHSUNDEEP
autocompleteangular-material
user3794740
user3794740

Reputation: 332

Reset autocomplete input after selection, then show all options

I have an autocomplete input, the problem is whenever I reset the input value it doesn't reset selection options. It only shows the latest selection.

Here's the GIF to illustrate the problem: https://recordit.co/aVXqlPYHFQ

I tried with this.form.get('panelForm').setValue(''); it reset the input but doesn't reset the options

Here's my code

<form *ngIf="options.length">
  <mat-form-field [formGroup]="form">
    <input type="text" [placeholder]="'Panel'" aria-label="Panel" matInput [formControl]="myControl" [formControlName]="'panelForm'" [matAutocomplete]="auto">
    <button mat-button mat-icon-button matSuffix (click)="clear()" *ngIf="form.get('panelForm')">
      <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)='selectPanel($event.option.value)'>
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
        {{option.name}} ({{option.genesCount}})
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

  myControl = new FormControl();
  filteredOptions: Observable<Panel[]>;
  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => { return this._filter(value)})
    );

    this.form = this.fb.group({
      panelForm: new FormControl({ value: '', disabled: this.options.length < 1})
  });
  }

  private _filter(value: string): Panel[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.name && option.name.toLowerCase().includes(filterValue));
  }

  clear(){
    this.form.get('panelForm').setValue('');
  }

Upvotes: 0

Views: 2244

Answers (2)

Jorge Mussato
Jorge Mussato

Reputation: 2524

You don't need to use Form control if you are using Form control name (inside a FormGroup).

I recommend using the FormControl and set:

ngOnInit() {
  this.myControl = new FormControl({'', disabled: this.options.length < 1});
  this.filteredOptions = this.myControl.valueChanges.pipe(
    startWith(''),
    map(value => { return this._filter(value)})
  );
}

clear() {
  this.myControl.patchValue('');
}

Should work

Upvotes: 1

JuNe
JuNe

Reputation: 1997

Try to reset the value directly in html:

<form *ngIf="options.length">
  <mat-form-field [formGroup]="form">
    <input #myInput type="text" [placeholder]="'Panel'" aria-label="Panel" matInput [formControl]="myControl" [formControlName]="'panelForm'" [matAutocomplete]="auto">  // <-- set name here 'myInput'
    <button mat-button mat-icon-button matSuffix (click)="clear()" *ngIf="form.get('panelForm')">
      <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="selectPanel($event.option.value);myInput.value=''">  // <-- reset value here
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
        {{option.name}} ({{option.genesCount}})
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Upvotes: 0

Related Questions