mdb-autocomplete with formcontrolName doesn't work at t


Topic: mdb-autocomplete with formcontrolName doesn't work at the second time

Code4Humans asked 6 years ago

Hello, i would like to know what is the best way to work mdb-autocomplete inside a form (Angular Form)

I have this inside a form:

 <mdb-autocomplete label="Organization Name" placeholder=" " name="autocomplete" formControlName="organization"
            (selected)="onAutocompleteSelected($event)" [datasource]="dataService" [minSearchLength]="0">
          </mdb-autocomplete>

and in typescript i have this in nginit :

currentResults = new Subject<any>();

this.dataService = this.completerService.local(this.currentResults.asObservable(), 'name', 'name');

 this.addEnrollmentForm.get('organization').valueChanges.pipe(
      debounceTime(400),
      distinctUntilChanged(),
      switchMap((inputVal) => !inputVal ? of([]) : this.searchForOrganizationByQuery(inputVal)),
      takeUntil(this.destroyed)
    ).subscribe((response: any) => {
      console.log('second');
      console.log(response);
      this.currentResults.next(response);
    });

The first time works, but the second time no.

I'll aprreciate your help. regards.


Damian Gemza staff answered 6 years ago

Dear @Code4Humans

Could you please specify exactly, what works for the first time, and not works for the second time?

Please take a look at my code - for me, I'm able to see in the console every selected item (if it is not equal like previous one - due to distinctUntilChanged):

.html:

<form [formGroup]="form">
        <mdb-autocomplete formControlName="comp" [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService"
                          [minSearchLength]="0">
        </mdb-autocomplete>
      </form>

ts:

form: FormGroup = new FormGroup({
   comp: new FormControl()
 });

  protected searchStr: string;
  protected dataService: CompleterData;
  protected searchData = [
    { color: 'red' },
    { color: 'green' },
    { color: 'blue' },
    { color: 'cyan' },
    { color: 'magenta' },
    { color: 'yellow' },
    { color: 'black' },
  ];

  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'color', 'color');

    this.form.controls['comp'].valueChanges.pipe(
      debounceTime(400),
      distinctUntilChanged(),
    ).subscribe((data: any) => {
      console.log(data);
    })
  }

Best Regards,

Damian


Code4Humans answered 6 years ago

Hello, yeah but in your case you have a static list (searchData), when i enter a new letter in the input text i call a service with data paginated. so i'm using valuechanges to listen the changes in the input text and bring new data


Damian Gemza staff answered 6 years ago

Dear @Code4Humans

My code works exactly the same as yours. When I type a character, there's 400ms debounce, distinctUntilChanged() and after it, the result of a search is logged into the console.

There's shouldn't be the difference between data acquired from API or from the static source.

But if you still encounter problems with mdb-autocomplete component, maybe you should try our new mdb-auto-completer component which is different from the old one?

Please take a look at our new completer.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.1.0
  • Device: computer
  • Browser: chrome
  • OS: linux
  • Provided sample code: No
  • Provided link: No