Fala Devs,
Estou tentando utilizar o Autocomplete do Angular Material, segui as orientações do site, mas o frame com a lista de opções não é exibido.
Observei que o exemplo do site utiliza a propriedade formControl
, porém, estou utilizando um formGroup
pra montar o formulário.
Seguem os códigos:
<mat-form-field class="form-control" appearance="standard">
<mat-label>Nacionalidade</mat-label>
<div matAutocompleteOrigin #origin="matAutocompleteOrigin">
<input matInput required="true" type="text" placeholder="Informe o País onde nasceu"
[matAutocomplete]="auto" formControlName="paisNascimento" [matAutocompleteConnectedTo]="origin" />
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayPais">
<mat-option *ngFor="let pais of paisesFiltrados | async" [value]="pais">
{{ pais }}
</mat-option>
</mat-autocomplete>
</div>
</mat-form-field>
this.dadosPessoaisForm = this._formBuilder.group({
cpf: [''],
nomeCompleto: ['', Validators.required],
sexo: [null],
dataNascimento: ['', Validators.required],
nomeMae: ['', Validators.required],
nomePai: [''],
nomeSocial: [''],
paisNascimento: ['', Validators.required],
escolaridade: ['', Validators.required]
});
/**
* Realiza a filtragem dos dados de paises para exibição no autocomplete.
*/
public filtrarPaises() {
if (!this.paises) {
this.preencherPaises();
}
this._paisesFiltrados = this.dadosPessoaisForm.controls['paisNascimento'].valueChanges.pipe(
startWith(''),
map(value => this._filterPais(value || '')),
);
}
/**
* Realiza a busca de um país na lista de países.
*
* @param nome Nome do país a ser pesquisado na lista.
* @returns Lista de países com o nome (ou parte) informado.
*/
private _filterPais(nome: string): PaisModel[] {
console.log('Filtrando países...');
return this.paises.filter(value => value.denominacao.toLowerCase().indexOf(nome.toLowerCase()) === 0);
}
public displayPais(pais: PaisModel): string {
return pais && pais.denominacao ? pais.denominacao : '';
}
/**
* Realiza o preenchimento da lista de Países.
*/
private preencherPaises(): void {
if (!this.paises) {
this._paisService.buscarPaisesAcessoPublico().subscribe((data: PaisModel[]) => {
this.paises = data;
});
}
}
public get paisesFiltrados(): Observable<PaisModel[]> {
return this._paisesFiltrados;
}
Não cheguei a testar o exemplo como exibido no site, mas não acredito que seja devido ao formControl
, então gostaria de saber se algum de vocês já utilizou esse componente com ReactiveForms
, se passou por esse mesmo problema e como corrigiu.
Estou utilizando o Angular 14.
Desde já agradeço a ajuda!