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?

Published

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: KeyboardEvent) {
    console.log(event.key);

    let currentVendorValue = this.fgOrderForm.get('fcVendor').value;

    //find out if this value is in collection and trigger a custom validation maybe? 
  }

  onBlurVendorInput() {
    // setTimeout(() => {
    //   if (!this.selectedVendor || !this.selectedVendor.name || this.selectedVendor.name !== this.fgOrderForm.controls['fcVendor'].value) {
    //     this.fgOrderForm.controls['fcVendor'].setValue(null);
    //     this.selectedVendor = null;
    //   }
    // }, 1000);
  }

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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