Questions tagged mat-autocomplete

Explore the latest questions and answers asked by our top developers.

How to get material mat-autocomplete to allow as valid only a value that is in the option collection amd participate in reactive form validation?

I have a disabled button that I want enabled if the user types a valid value so every key stroke I need to see if it matches.. <mat-form-field appearance=”outline” style=”width: 100%;”> <mat-label>Vendor</mat-label> <input matInput type=”text” [formControl]=”fcVendor” [matAutocomplete]=”auto” (keydown)=”onKeyDownVendorInput($event)” (blur)=”onBlurVendorInput()”> <mat-autocomplete #auto=”matAutocomplete” (optionSelected)=”onClickVendorSelected($event)”> <mat-option *ngFor=”let selectedVendorString of autoFilter | async” [value]=”selectedVendorString”> {{selectedVendorString}} </mat-option> </mat-autocomplete> </mat-form-field> onKeyDownVendorInput(event: […]

mat-autocomplete with filter and selected items in mat-table not working

I am new to angular and angular material. I’m using a tutorial to do a small project where I have an angular material autocomplete to filter actors and when I click on one of them, it should be displayed in a mat-table with drag drop feature. So, from the menu – first click on "create […]

When I edit form I got 3 different value in console.log but same value showing in textbox using mat autocomplete in angular 7

when I edit my form I got 3 three different values in the console. But in textbox shows the same value. I am using mat autocomplete and creating a dynamic textbox. Source: Angular Questions

By Zeba
Published
Categorized as angular, mat-autocomplete, ngmodel Tagged , ,

mat-autocomplete not showing mat-options

I have this html, it is a search bar for my navbar <form> <div class="input-group"> <button class="btn btn-outline-secondary" type="submit" id="button-addon1" > <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" > <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 […]

Mat Autocomplete shows [object object] in the dropdown before the selection

Used {{option.name}}but throws error TS2339: Property ‘name’ does not exist on type ‘string’. I have also tried changing the value, currently i have {option} in the list so the object is displayed, all other things like filter, selection and on click is working but the display, please help <form> <mat-form-field> <input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl"> […]

Angular – mat-select autocomplete appears behind the Angular Material Dialog

I am using angular 9. I need to do a form that has a form array in it that I need to show in the popup, Initially, I used bootstrap modal that was not accepted for formarray which shows the same line index for all the form array lines, so I switched to mat-dialog In […]

mat-autocomplete not filtering with observable

I have two mat-autocomplete drop downs in a reactive Angular form (Angular and Angular Material v12). One works. It is pulling an array of objects from a service and does not include an Observable for the options. It is developed similarly to the example. The other one is subscribing to an observable for the drop […]

By Kevin Dick
Published
Categorized as angular, mat-autocomplete, observable Tagged , ,

mat-autocomplete work with ngx-perfect-scrollbar wrong

When i use keyboard arrow to switch option,ngx-perfect-scrollbar is not scroll,demo is here https://stackblitz.com/edit/angular-ivy-muhrqm?file=src/app/app.component.ts I’m new,and my english is poor,if I did not express it clearly, please forgive me Source: Angular Questions

mat-autocomplete dropdown doesn’t move when scrolling the page

I have an issue with mat-autocomplete options dropdown menu. Once I open the dropdown, and scroll down the page, the dropdown doesn’t move and it sticks in the same place. How to resolve this? I followed some ways from here, but it didn’t work out on my end. Source: Angular Questions

Make second mat-autocomplete update with filtered data

I’ve got an Angular Material table with a DataSource set, and am using Material Table Filter to filter the data. Instead of regular inputs, I’ve got a couple material autocompletes that populate their options from a source of unique values from the table. On their own, these autocompletes work fine – if you search for […]

1 5

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq