Disable input field after select the value in mat autocomplete in angular?

Question

Hi every i want to disable the input field after selected the value in drop down, and i want to reset the selected value using of reset button.

For reference Stackblitz : https://stackblitz.com/edit/mat-autocomplete-1uelcd?file=app%2Fautocomplete-display-example.html

For example:- If we selected any value in the input field then filed should be disabled after clicks the reset button it should enabled to select the value please check and help us.

Html:

    <div class="example-form">
      
      <form>
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto2">
          <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{ option.name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
         <button  mat-raised-button (click)="onResetSelection()" color="primary">Reset Selection</button>
      </form>
     
    </div>

Reset:


onResetSelection() {
    this.filteredOptions = [];
}

Disable:

[disabled]="filteredOptions =='option'"

Why don't you bin the input to a variable? And why are you resetting filteredOptions? You should be resetting the selected value? — Arcteezy
first we need to select the value in drop down after selecting the value,the input field should disable after that if we click reset button disable and selected value should reset. — Maniselvam R
I got the requirements. But I think what you're doing is wrong. On clicking reset button, you should be clearing the selected value and not the list of possible values. — Arcteezy
first i expected the disable input field after selects any value from drop down, if in case again we want to change the value in drop down, we need to remove the input field disable function so that only we need reset button — Maniselvam R

Ganesh Ganesh · Accepted Answer · 2020-12-16T10:24:31

You can do that with below approach

Add on select event to disable form control and while doing reset event just clear the form control.

In View :

  <mat-autocomplete #auto2="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
           {{ option.name }}
        </mat-option>
   </mat-autocomplete>

In Template :

  ...

  onSelectionChanged(event: any) {
     this.formGroupName.controls['myControl'].disable();
  }

  onResetSelection() {
    // you can enable the control with below line
    this.formGroupName.controls['myControl'].enable();
    this.formGroupName.controls['myControl'].setValue('');
  }

  ...

Happy Coding.. :)

Disable input field after select the value in mat autocomplete in angular?

1 Answers