CODEWITHSUNDEEP
angulartypescriptangular-material
lolplayer101
lolplayer101

Reputation: 2383

have mat-autocomplete not replace but add value

I know that with the onSelectionChange() from the mat-option of the mat-autocomplete i can do something when an option is selected but what i want is for the autocomplete to ADD the value of the mat-option to the input instead of replace its content.

Example:

How do i accomplish this without kepping tabs on the form value and stocking its previous value and putting it back (since that just seems like a bad workaround)?

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="world">
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

Upvotes: 6

Views: 1981

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657228

My workaround is to always prepend the option value with the current input value 

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="hello + ' ' + world">  <<=== modified 
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

Upvotes: 7

Related Questions