Hi,

Can anyone provide an example of how to get the selected item from an autocomplete? I also need to preset the value when the page loads, based on certain conditions, can anyone explain how this is done? I've tried this.siteForm.get('customer')?.patchValue('Test Customer'); but that doesn't work. (Using Reactive Forms)

Resources (screenshots, code snippets etc.)

HTML

<div class="p-2" [ngClass]="{ 'pb-4': customer?.invalid && (customer?.dirty || customer?.touched) }">
      <mdb-form-control>
        <input mdbInput mdbValidate [ngModel]="searchText | async" (ngModelChange)="searchText.next($event)" [mdbAutocomplete]="autocomplete" type="text" id="customer" formControlName="customer" class="form-control" required />
        <label mdbLabel class="form-label" for="customer">Customer search *</label>
        <mdb-error *ngIf="customer?.invalid && (customer?.dirty || customer?.touched)">Customer is required</mdb-error>
        <div *ngIf="loading" class="autocomplete-loader spinner-border" role="status"></div>
      </mdb-form-control>
      <mdb-autocomplete #autocomplete="mdbAutocomplete" [displayValue]="displayValue" (opened)="onOpen()" (selected)="customerSelected()">
        <mdb-option *ngFor="let option of results | async" [value]="option">
          {{ option.name }}
        </mdb-option>
        <div *ngIf="notFound" class="autocomplete-no-results">No results found</div>
      </mdb-autocomplete>
    </div>

TS

export class SiteDetailsComponent implements OnInit {

  public id: any;
  public site: any = { identifier: null, name: '', customer: null, address: {} };
  public searchText = new Subject<string>();
  public results: Observable<any>;
  public notFound: boolean = false;
  public loading: boolean = false;
  public dataLoaded: boolean = false;
  public selectedCustomer = null;
  public saving: boolean = false;
  public errorMessage = null;
  notificationRef: MdbNotificationRef<ToastComponent> | null = null;

  public siteForm = new FormGroup({
    customer: new FormControl(this.site.customer, { validators: Validators.required, updateOn: 'change' }),
  });

  public types: any;

  get customer() { return this.siteForm.get('customer'); }

  constructor(private route: ActivatedRoute, private notificationService: MdbNotificationService, private customerService: CustomerService, private siteService: SiteService) {
    this.results = this.searchText.pipe(
      debounceTime(250),
      switchMap((value: string) => this.filter(value)),
      tap((results: any) =>
        results.length > 0 ? (this.notFound = false) : (this.notFound = true)
      )
    );

    this.customer?.valueChanges
      .pipe(filter(
        newValue => typeof newValue != 'string')
      )
      .subscribe(newValue => {
        this.selectedCustomer = newValue;
      });
  }

  ngOnInit(): void {

  }

  filter(value: string): any {
    if (!value) return of();

    const filterValue = value.toLowerCase();
    this.loading = true;

    return this.customerService.searchByName(encodeURI(filterValue)).pipe(
      map((data: any) => {
        return data;
      }),
      delay(300),
      tap(() => (
        this.loading = false
      ))
    );
  }

  displayValue(value: any): string {
    return value ? value.name : '';
  }

  onOpen(): void {
    if (!this.dataLoaded) {
      this.searchText.next('');
      this.dataLoaded = true;
    }
  }

  customerSelected(): void {
    console.log('option selected');
  }

}

Thanks!