-1

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);
  }
punkouter
  • 5,170
  • 15
  • 71
  • 116

1 Answers1

0

vendorInputValidator(control: AbstractControl): { [key: string]: boolean } | null {
    let foundVendorObj = this.allVendorsStringArray.find(x => x === control.value);

    if (!foundVendorObj) {
      return { 'vendorInputValidator': true }
    }

    return null;
  };
punkouter
  • 5,170
  • 15
  • 71
  • 116