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:
"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,
]
})
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.