Ejemplo de select autocompletado para un formulario con AngularMaterial y Angular Universal

Cuando programamos un formulario en una web y necesitamos incluir una serie de opciones en una etiqueta select es muy interesante añadir la funcionalidad de autocompletar. De esta forma podemos agilizar la introducción de datos y, por lo tanto, mejorar la experiencia de nuestros usuarios.

En este tutorial os vamos a enseñar a reproducir el siguiente formulario:

Podéis descargar el formulario del ejemplo anterior en el siguiente repositorio https://github.com/al118345/formulario-angular-autocompletado-con-angular-universal

Instalación Angular Material

Lo ideal es realizar una instalación limpia con el siguiente comando:

ng add @angular/material

Ahora bien, seguramente no os va a funcionar. Si se produce un error en la instalación os recomiendo realizar la siguiente instalación

npm install @angular/material --force --save

Una vez instalado, en el fichero angular.json tenemos que añadir el fichero css de angular material en el apartado style

"styles": [
        "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
}

Una vez tenemos los estilos, ahora toca añadir los imports necesarios en el fichero app.module.ts de la siguiente forma:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {MatInputModule} from '@angular/material/input';
import {MatButtonToggleModule} from '@angular/material/button-toggle';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
   ReactiveFormsModule
    , MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    FormsModule, MatButtonToggleModule,
  ]
})

Ejemplo de formulario.

Una vez instalado, quedará añadir al componente.ts el siguiente código:

 departamentotext: string[] = ["ALICANTE","SES VALENCIA","TORREVIEJA","VINAROZ","XATIVA"]
  Items:  string[];
  autoFilter: Observable<string[]>;
  formControl = new FormControl(); constructor() {
    this.mostrarInfo = false;
    this.info = '';
    this.Items = this.departamentotext
    this.autoFilter = this.formControl.valueChanges.pipe(
      startWith(''),
      map(value => this.mat_filter(value))
    );
  }
  private mat_filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.Items.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
  }

  ngOnInit(): void {
  }

  onSubmit() {
    this.mostrarInfo = true

  }

Mediante este código gestionaremos el select autocompletado. La función mat_filter, es la que se encarga de realizar la búsqueda dentro del array.

Y en la vista aplicamos la siguiente implementación:

<div class="row">
    <div class="col">
      <mat-form-field style="width: 300px; margin: 50px auto; display: block;">
        <input type="text" [(ngModel)]="info" placeholder="Turno" matInput [formControl]="formControl"
               [matAutocomplete]="auto2">
        <mat-autocomplete autoActiveFirstOption #auto2="matAutocomplete">
          <mat-option *ngFor="let item1 of autoFilter | async" [value]="item1">
            {{item1}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
    <div class="col">
      <mat-button-toggle  style="margin-top: 10%" (click)="onSubmit()" > Enviar peticion</mat-button-toggle>
    </div>
  </div>
  <div clas="row">
    <div *ngIf="mostrarInfo; then   mostrarinteraciones"></div>
    <ng-template #mostrarinteraciones>
      <p>El valor del select es <strong>{{info}}</strong></p>
    </ng-template>

  </div>

Esta vista simplemente asocia cada uno de los componente con las variables y las funciones necesarias para realizar las tareas del autocompletado.