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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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