CODEWITHSUNDEEP
angularangular-material
Matthis.h
Matthis.h

Reputation: 909

Clear Angular Material autocomplete on click

Hi I want reset value of angular material autocomplete on click But I don't know how do.

My code : 

  <mat-form-field>
        <input type="text" placeholder="Give Rights" formControlName="selectedOption" aria-label="User" matInput  [matAutocomplete]="auto" (input)="onSearchChange($event.target.value)">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let user of users" [value]="user.displayName" (onSelectionChange)="setSelectedUser($event, user)">
                {{ user.displayName }}
            </mat-option>
        </mat-autocomplete>
        <button (click)="resetValue($event)">RESET</button>
    </mat-form-field>

TS : 

    this.nameForm = this._formBuilder.group({
    selectedOption: new FormControl()
});    

    resetValue(){
    console.log("Value -> ", this.nameForm.value.selectedOption);
    this.nameForm.value.selectedOption = "test";
}

Can you help me ?

Upvotes: 2

Views: 23729

Answers (7)

Hima Gamal
Hima Gamal

Reputation: 38

I came across the same issue as mat-autocomplete doesn't response properly to control.reset, and it only worked using the following solution. I will leave it here, hopefully it helps someone.

Here's my TypeScript code (deselecting each option manually): -

reset(auto: MatAutocomplete): void {
  auto.options.forEach((c) => c.deselect());

  this.control.reset();
}

My HTML button code that should reset: -

<button
    *ngIf="control.value"
    (click)="reset(auto)"
    mat-icon-button
    matIconSuffix
    type="button">
    <mat-icon svgIcon="mat:close"></mat-icon>
</button>

Upvotes: 0

Monish N
Monish N

Reputation: 398

For those who are using Reactive forms can use the below to clear inputs.

//import Formbuilder in contructor
constructor(
    private fb: FormBuilder
  ) {}

public form_details : FormGroup;

//Define the form names on ngOnInit
ngOnInit(): void {
    this.form_details = this.fb.group({
      payment_type: ['', Validators.required],
      payment_date: [new Date(), Validators.required],
      total_amount: [
        { value: 0, disabled: false },
        [
          Validators.required,
          Validators.min(1)
        ],
      ],
      remarks: [''],
    });
}

// Then add mat-autocomplete inside form in template

<form [formGroup]="form_details" (submit)="onSubmit()">


          <mat-form-field appearance="fill" class="example-full-width">
            <mat-label>Payment type </mat-label>
            <input
              type="text"
              placeholder="Pick one"
              matInput
              formControlName="payment_type"
              [matAutocomplete]="auto"
            />
            <mat-autocomplete
              #auto="matAutocomplete"
              [displayWith]="paymentTypeDisplayFn"
              (optionSelected)="onPaymentTypeChange($event)"
            >
              <mat-option
                *ngFor="let option of filteredPaymentTypes | async"
                [value]="option"
              >
                <small
                  ><b>{{ option.payment_code}}</b></small
                >
                / <small>{{ option.payment_type_name}}</small>
              </mat-option>
            </mat-autocomplete>
            <button
              *ngIf="form_details.get('payment_type').value"
              matSuffix
              mat-icon-button
              aria-label="Clear"
              (click)="handleClearInput('customer')"
            >
              <mat-icon>close</mat-icon>
            </button>
          </mat-form-field>

</form>


// Add the following code in component

paymentTypeDisplayFn = (options) => {
    return options && options.payment_type_name
      ? options.payment_type_name+ '/' + options.payment_code
      : '';
  };

  private _filteredPaymentType(value: any): any[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(
      (option) =>
        option.payment_code.toLowerCase().includes(filterValue) ||
        option.payment_type_name.toLowerCase().includes(filterValue)
    );
  }

  onPaymentTypeChange(e) {
    // handle your own logic
  }

 handleClearInput(key) {
    this.payment_entry_details.patchValue({
      [key]: '',
    });
  }

Upvotes: 0

user3205930
user3205930

Reputation: 111

<pre>
//html
<input #inputSearch ........>

<button (click)="btnClick()"  ..........>click</button
//ts
import {ElementRef, ViewChild} from '@angular/core';
 @ViewChild('inputSearch') inputSearch: any;
 constructor(private elementRef: ElementRef,.............)
{
this.inputSearch = elementRef
}
btnClick(){
          this.inputSearch.nativeElement.value=null;
this.inputSearch.nativeElement.dispatchEvent(new Event('input', {
          }))
}

</pre>

Upvotes: 1

fergus
fergus

Reputation: 71

What worked for me was adding a local reference to the input control and using that to set the value to empty when an option is clicked:

input
    #matInput
    type="text"
    placeholder="Search"
    aria-label="Search"
    matInput
    [formControl]="search"
    [matAutocomplete]="auto">
  <mat-autocomplete
    #auto="matAutocomplete"
    (optionSelected)="onOptionSelected($event)"
    panelWidth="auto">
    <mat-option *ngFor="let item of items | async"
      [value]="item.Key"
      (click)="matInput.value=''">
      {{ item.Name }}
    </mat-option>
  </mat-autocomplete>

Upvotes: 4

Sandeep
Sandeep

Reputation: 471

First you need to get a handle to the control whose value you want to set, you can do this using FormGroup's get method

nameForm.get('selectedOption')

Then you can simply call the setValue method provided by Reactive Forms to set the value of that control.

<button (click)="nameForm.get('selectedOption').setValue('')">RESET</button>

Upvotes: 9

G. Tranter
G. Tranter

Reputation: 17958

Your syntax doesn't look right. Try this.nameForm.controls['selectedOption'].setValue('test');

Upvotes: 1

bugs
bugs

Reputation: 15323

You can use two-way data binding to bind the input value to a property of the class, and use resetValue to act on that property.

<input [(ngModel)]="selectedOption" ...

resetValue() {
  this.selectedOption = '';
}

See working example here

Upvotes: 6

Related Questions