Ritten pro asked 5 years ago


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?


Ritten pro answered 5 years ago


Thanks for the reply,

I just added:

    this.completer.selectedItemChanged().subscribe((data: any) => {
        this.form.controls.controlName.setValue(data.text);
    });

And it fixed my issue


Arkadiusz Idzikowski staff answered 5 years ago


Did you copy all ts code from the example from our documentation? There are few methods missing in the code you provided.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Mac
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No