Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set value of angular material select autocomplete programmatically

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

like image 444
Sithys Avatar asked Feb 14 '19 09:02

Sithys


People also ask

How does autocomplete set value?

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" .

How do I use angular material autocomplete?

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.

What is Matautocomplete in angular?

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.

How does angular validate autocomplete?

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.


1 Answers

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

like image 179
Marshal Avatar answered Oct 07 '22 20:10

Marshal