1

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'"
samgakhyeong
  • 534
  • 5
  • 7
Maniselvam R
  • 33
  • 1
  • 9
  • Why don't you bin the input to a variable? And why are you resetting `filteredOptions`? You should be resetting the selected value? – MonkeyScript Dec 16 '20 at 08:45
  • 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 Dec 16 '20 at 09:23
  • 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. – MonkeyScript Dec 16 '20 at 10:21
  • 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 Dec 16 '20 at 11:49

1 Answers1

0

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.. :)

Ganesh
  • 5,808
  • 2
  • 21
  • 41
  • thanks for the answer it is not working for me, if possible can please update the stack-blitz as well for better understanding. – Maniselvam R Dec 16 '20 at 11:34
  • @Maniselvam have tried this https://stackblitz.com/edit/mat-select-autocomplete?file=src%2Fapp%2Fapp.component.html, might be helpful.. – Ganesh Dec 16 '20 at 13:26
  • Hi @ganesh this stackblitz example i have seen already, it's not working for us thanks.can implement your above given answer code into my stackblitz? – Maniselvam R Dec 18 '20 at 03:50