I have a simple angular material autocomplete function. Now i want to set the value / selected option of this autocomplete programmatically. This is my code:
hardware.component.html
<tr>
<td class="desc pd7">Firmware</td>
<td>
<div class="form-group mb0">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Select firmware" aria-label="Number" matInput [formControl]="myControlFirmware" [matAutocomplete]="auto1" (keydown.enter)="$event.preventDefault()">
<mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFirmwares">
<mat-option *ngFor="let firmware of filteredFirmwares | async" [value]="firmware" (onSelectionChange)="getIdFromFirmware($event, firmware)">
{{ firmware.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
</td>
</tr>
hardware.component.ts
this.miscellaneousTerminalService.getMiscellaneous('firmware').subscribe(data => {
if(data.success) {
this.availableFirmwares = data.data;
this.filteredFirmwares = this.myControlFirmware.valueChanges
.pipe(
startWith(''),
map(valFirmware => this.filterFirmwares(valFirmware))
);
}
});
filterFirmwares(valFirmware: any): any[] {
return this.availableFirmwares.filter(firmware => {
let name = valFirmware.name ? valFirmware.name : valFirmware;
return firmware.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
});
}
displayFirmwares(firmware: any): string {
return firmware ? firmware.name : firmware;
}
getIdFromFirmware(event, firmware) {
if(event.isUserInput) {
this.selectedFirmware = firmware._id;
}
}
i tried to set my firmware model to the _id
of the selected Firmware or the name, but nothing works. How can i set the value programmatically. I'm using Angular Material @V 7
MUI Autocomplete Get Selected Value I used the onChange handler to pass the selected option to the state value's setter. If we want to get the Autocomplete's selected value for use with a form submission, we only need to wrap the Autocomplete in a form element and add a Button with type="submit" .
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query.
Create custom validator for autocomplete Working with reactive forms, the easiest way to solve this issue is to write a custom form validator. This function evaluates the value of a control and return a validation error if the value is a string type.
You can do the following to accomplish this.
If you aren't sure of the options ahead of time, you retrieve them from API for example, you can get them from the MatAutocompleteTrigger
like this.
import { MatAutocompleteTrigger } from '@angular/material'
@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;
let options = this._auto.autocomplete.options.toArray()
This stackblitz sets the value to two
when the button is clicked. I retrieve the options from the trigger and use the array of options to set the value in the formControl
... in your case it would be this.myControlFirmware.setValue(options[1].value)
setValue() {
let options = this._auto.autocomplete.options.toArray()
this.myControl.setValue(options[1].value)
}
Stackblitz
https://stackblitz.com/edit/angular-s3gn1w?embed=1&file=app/autocomplete-simple-example.ts
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With