0

Estou aprendendo Angular e com dificuldade para atualizar a DOM de um formulário em Angular. Meu objetivo é fazer um autocomplete de email, após colocar o "@" em um input: o texto é capturado e mostrado junto com domínios que são indexados em um array, mas não consigo criar uma caixa de dialogo de seleção com o resultado no input desejado

Até a parte de juntar o texto com os domínios que coloquei no array eu consegui, usei um map para concatenar com o texto do input (que é o "domainDatalist"). A questão é, como fazer uma caixa de seleção na DOM com os elementos do domainDatalist?

app.component.html:

<body ng-app="">


  <input type="email" list="email-domain" (keyup)="emailAutocomplete($event)" [(ngModel)]="domainValue">

<datalist id="email-domain">
    <option [value]="domainDatalist" >{{domainDatalist}}</option>
</datalist>
</body>

app.component.ts


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent  {
  title = 'email-teste';

  public domainValue: string;
  public domainList = [];
  public domainDatalist = [];
  
  public emailAutocomplete($event): string[] {
    if (($event.keyCode === 48 || $event.keyCode === 50) && $event.srcElement.value.slice(-1) === "@") {

        this.domainList = [
          { id: 0, emailDomain: 'google.com' }, 
          { id: 1, emailDomain: 'outlook.com'}
        ];

      let domainDatalist = this.domainList.map(x => this.domainValue + x.emailDomain);

      console.log(domainDatalist)

      return domainDatalist;

    } else {
      this.domainDatalist = [];
    }
  }
}

1 Resposta 1

0

Primeiro para montar as opções usa-se o ngfor da maneira abaixo:

<datalist id="email-domain">
   <option *ngfor="let item of domainList" [value]="item" >{{item}}</option>
</datalist>

Depois dentro do método que adiciona os itens no autocomplete, caso apenas o código acima não funcione, adicione na atribuição do seu array na forma abaixo:

    this.domainList = [...[
      { id: 0, emailDomain: 'google.com' }, 
      { id: 1, emailDomain: 'outlook.com'}
    ]];

Esta forma força a mudar a referencia da variável e montar novamente o DOM

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .