Topic: Auto Complete (id and value)
Hello, Iam implementing the mdb-auto-completer, and i want show the description of item and save the id. How i can do that ? Iam new on angular. I try in mdb-auto-completer dont work, try in mdb-option didn´t work too.
my code :
Nome: {{option.nomeutilizador}} Email: {{option.email}} </mdb-option>
</mdb-auto-completer>
</div>
</div>
export class VerificacaoCodigoFormComponent extends BaseResourceFormComponent implements OnInit {
@ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent; searchText = ''; results: any; //data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black']; data: any = ['red']; filteredTeste: any;
optionUtilizador: Array;
constructor( protected verificacaoCodigoService: VerificacaoCodigoService, protected utilizadoresService: UtilizadoresService, protected injector: Injector ) { super(injector, new VerificacaoCodigo(), verificacaoCodigoService, VerificacaoCodigo.fromJson); // this.results = this.searchEntries(this.searchText); }
ngOnInit() { this.loadUtilizadores(); // Como ele subscreve a class BaseResourceFormComponent // e para garantir que os metodos da classe BaseResourceFormComponent, tais como buildform, pomos:
super.ngOnInit();
}
protected buildResourceForm() {
this.resourceForm = this.formBuilder.group({
id: [null],
codigoverificacao: ["", [Validators.required]],
dataexpiracao: ["", [Validators.required]],
activo: ["", [Validators.required]],
utilizador_id: ["", [Validators.required]],
utilizador_id2: ["", [Validators.required]],
});
}
getDataItems() { // console.log("Teste1 ",this.optionUtilizador); // console.log("Teste2 ",this.data);
return this.data;
}
searchEntries(term: string) { // console.log(" searchEntries ",this.data); // console.log(" searchEntries2 ",this.optionUtilizador); return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase()))); }
getFilteredData() { // this.results = this.searchEntries(this.searchText); if (this.searchText.length > 0) { this.utilizadoresService.getAllPesquisarNome(this.searchText) .pipe( debounceTime(300) ) .subscribe(
(utilizador: any) => {
if (utilizador.length > 0) {
// let listUtilizador: any[] = [];
// utilizador.forEach(utilizador => {
// let option = { value: utilizador.id, label: utilizador.nomeutilizador };
// listUtilizador.push(option);
// });
// this.optionUtilizador = listUtilizador.slice();
//this.results = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
this.results = utilizador;
console.log("utilizador --- ", utilizador);
}
}
);
}
}
onChange() { this.getFilteredData(); }
ngAfterViewInit() { this.completer.selectedItemChanged().subscribe((data: any) => { this.searchText = data.text; this.getFilteredData(); console.log('Selected item change', data); }); }
ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class.
}
}
adanilson answered 6 years ago
How can i still show the value in page and in component ad the id in to formcontrol?
Damian Gemza staff commented 6 years ago
Dear @adanilson
I'm afraid, that I don't understand you well. Could you please rewrite your question? What exactly do you want to achieve?
Do you want to display the selected value from mdb-auto-completer
component on the page? Or something else?
Best Regards,
Damian
adanilson answered 6 years ago
Yes, I want display a object, in the page display the description and in the component save de id in form control.
like in select :
Open this select menu One Two Three
Damian Gemza staff commented 6 years ago
Again I don't understand your problem. Do you want to:
1) Display object which you have selected in mdb-auto-completer
on the page where the component is used,
2) In which component do you want to save the id in the form control,
I don't know what do you mean by saving the id - what is id? Property from your object, id of the HTML element, template reference to some element?
And what do you want to do after saving this strange id?
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.5.4
- Device: Mac Book
- Browser: Chrome
- OS: Mac IOS
- Provided sample code: No
- Provided link: No