Expected behavior

Using reactive forms with md-auto-completer, and the user clicks on an auto complete option, getting the form value using this.form.control.completer.value, does not have the value updated.

Actual behavior

get the updated value after a user clicks on the value from the select region

Resources (screenshots, code snippets etc.)

<div class="md-form">
  <input formControlName="controlName"
         type="text"
         #searchField
         class="completer-input form-control mdb-autocomplete mb-0"
         (ngModelChange)="getFilteredData(searchField.value)"
         [mdbAutoCompleter]="auto">
  <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="No results found">
    <mdb-option *ngFor="let option of results | async" [value]="option">
      {{option}}
    </mdb-option>
  </mdb-auto-completer>
</div>

My typescript

    @ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;
    @Input() data: string[];

    searchEntries(term: string): Observable<string[]> {
        return of(this.data.filter((data: any) =>
            data.toString().toLowerCase().includes(term.toString().toLowerCase())));
    }

    getFilteredData(value: string): void {
        this.results = this.searchEntries(value);
    }

fails from main form (if i type say "frui" and then click on 'fruit', the following will just get 'frui')

console.log(this.form.control.controlName.value)

What am I missing to get the clicked data using reactive forms?