submit value for mat-autocomplete

Question

We have a mat-autocomplete input on a form.

The options are populated from a database, these are returns as an ID, String pair.

I would like to allow the user to select based on the string value but submit the ID value with the form for a lookup when posted server side? What is the best solution for this please?

My component.html is;

<mat-form-field class="form-group special-input">
    <input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput formControlName="trade" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
             <span [innerHTML]="option.name | highlight: toHighlight"></span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Where option has a name and id field.

I have tried adjusting the [value]="option.name" to [value]="option.id" however this updated the text field in the auto complete to be the id value rather than the string?

Michele Sapignoli Michele Sapignoli · Accepted Answer · 2018-04-06T07:57:52

You can add a simple

(onSelectionChange)="selectedOption(option)"

on mat-option, passing the binding of the data to the ts component. Then you can easily decide what value you should pass to the server.

submit value for mat-autocomplete

1 Answers