Implementar formularios reactivos con type ahead

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:58

Implementar formularios reactivos con type ahead

Curso de Angular 4

Clase 70 de 80

Clase 70 / 80

Recursos

Conecta un campo de búsqueda con resultados en tiempo real de Google usando Angular, RxJS y Bootstrap. Aquí verás cómo estructurar el HTML, activar formularios reactivos, renderizar una lista con async y optimizar llamadas con debounceTime para un type ahead fluido y veloz.

¿Cómo implementar type ahead con Angular, RxJS y Google?

Primero, se prepara el HTML para capturar la entrada y mostrar resultados. El input se enlaza a un FormControl llamado searchField. Cada tecla genera eventos que, vía RxJS, hacen la llamada al API de Google, formatean la respuesta y alimentan un stream de resultados. Se renderiza una lista con Bootstrap y el async pipe para manejar la naturaleza asíncrona.

¿Cómo se pinta la lista con async y Bootstrap?

Input de texto con clase de Bootstrap para estilo.
Directiva reactiva [formControl] enlazada a searchField.
Lista sin ordenar con clases list-group y list-group-item.
Iteración con ngFor sobre results$ usando el async pipe.

<form>
  <div class="well">
    <label>Buscar negocio en Google.</label>
    <input type="text" class="form-control" [formControl]="searchField" />

    <ul class="list-group">
      <li class="list-group-item" *ngFor="let result of results$ | async">
        {{ result.formatted_address }}
      </li>
    </ul>
  </div>
</form>

La propiedad mostrada es formatted_address del API de Google: dirección legible para humanos.
Tip: revisar clases de Bootstrap para que se apliquen estilos correctos.

¿Qué error de Angular aparece y cómo se corrige?

Al usar [formControl] puede aparecer: "Can't bind to 'formControl' since it isn't a known property of 'input'". Causa: los formularios reactivos no se cargan por defecto. Solución: importar ReactiveFormsModule en AppModule.

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
  ]
})
export class AppModule {}

Tras guardar y recargar, el input ya actúa como control reactivo.
Útil abrir la pestaña Network en Chrome para observar el stream de llamadas.

¿Cómo reducimos llamadas y mejoramos performance?

Teclear rápido dispara muchos requests; incluso algunos fallan. Para evitar saturación, se usa debounceTime antes de switchMap. Así se espera un tiempo entre teclas y solo se ejecuta la última intención del usuario.

// crear.component.ts (fragmento)
this.results$ = this.searchField.valueChanges.pipe(
  debounceTime(500),
  switchMap(term => this.search(term)),
  map(resp => this.format(resp)),
  map(list => this.onlyAddresses(list))
);

debounceTime(500): espera medio segundo entre eventos de tecleo antes de llamar al API.
Aún es rápido y reduce drásticamente la cantidad de requests.

¿Qué operadores se concatenan y para qué sirven?

debounceTime: controla frecuencia de eventos para mejorar rendimiento.
switchMap: cancela búsquedas anteriores y usa solo la más reciente.
map (dos veces): transforma la respuesta y extrae los datos necesarios.
async (pipe en plantilla): suscribe y desuscribe automáticamente al stream; ideal para datos asíncronos y escenarios con sockets en RxJS.

¿Qué sigue para completar la experiencia?

Al hacer clic en un resultado, se puede autocompletar el formulario con: calle y número, ciudad y país. El API ya provee esa data en address_components (por ejemplo: street_number, long_name). La tarea consiste en capturar el clic en el ítem y poblar esos inputs.

Ejemplos probados: "Universidad Nacional" y "Juárez dos" muestran múltiples resultados bien formateados.
Habilidades aplicadas: Angular Reactive Forms, RxJS operators, Bootstrap, manejo de API de Google, diagnóstico con Network.

¿Te animas a implementar el clic en la lista y llenar las tres cajas? Comparte tu código y una captura en los comentarios para revisar juntos.

Carlos Enrique Ramírez Flores

Hace 8 años

angular 6 publicado el 12/07/2018
ojo no funciona con interval o con .debounceTime(500). si alguien puede hacerlo funcionar comparta y avisen por favor

crear component.ts

import { Component } from '@angular/core';
import { LugaresService } from "../services/lugares.service"
import { ActivatedRoute } from "@angular/router"
import { Observable }  from "rxjs"
import * as Rx from 'rxjs';
import { FormControl } from "@angular/forms"
import {Http} from '@angular/http'
import { switchMap, map } from 'rxjs/operators';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html'
})
export class CrearComponent {
	lugar:any = {}
	id:any = null;
	results$: Observable<any>;
	private searchField: FormControl;
    constructor(private lugaresService: LugaresService, private route: ActivatedRoute, private http:Http){
        this.id = this.route.snapshot.params['id'];
        if(this.id != 'new'){
            this.lugaresService.getLugar(this.id)
            	.valueChanges()
                .subscribe((lugar)=>{
                    this.lugar = lugar;
                });
        }
        const _URL = 'https://maps.googleapis.com/maps/api/geocode/json'
        this.searchField = new FormControl()
        this.results$  = this.searchField.valueChanges
        	.pipe(
        		switchMap(query => this.http.get(`${_URL}?address=${query}`))
        		,map(response => response.json().results)

        	);
        this.results$.subscribe()
    }
	guardarLugar() {
		var direccion = this.lugar.direccion+','+this.lugar.ciudad+','+this.lugar.pais
		this.lugaresService.obtenerGeoData(direccion)
		    .subscribe((result)=>{
		    	this.lugar.lat = result.json().results[0].geometry.location.lat
		    	this.lugar.lng = result.json().results[0].geometry.location.lng
				if(this.id != 'new'){
					this.lugaresService.editarLugar(this.lugar)
					alert('exito al editar')
				}else{
					alert(this.lugar.id);
					this.lugaresService.guardarLugar(this.lugar)
					alert('exito al guardar')
				}
				this.lugar = {}
		    })
	}
}

crea.component.html

<div class="well">
	<a routerLink="/lugares">Lugares</a> / crear lugar
</div>
<div class="container">
	<div class="row">
		<div class="col-md-6 col-sm-6">
		</div>
		<div class="col-md-6 col-sm-6">
			<div class="panel panel-default">
  				<div class="panel-body">
					<form action="">
						<div class="form-group">
							<label for="Nombre">Nombre del negocio</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.nombre" name="Nombre">
							</div>
						</div>
						<div class="form-group">
							<label for="Plan">Plan</label>
							<select name="Plan" id="Plan" class="form-control" [(ngModel)]="lugar.plan">
								<option value=""></option>
								<option value="pagado">Pagado</option>
								<option value="gratis">Gratis</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Cercania">Cercania</label>
							<select name="Cercania" id="Cercania" class="form-control" [(ngModel)]="lugar.cercania">
								<option value=""></option>
								<option value="1">Muy cercas</option>
								<option value="2">Cercas</option>
								<option value="3">Lejos</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Distancia">Distancia en km</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="number" min="1" step="0.1" class="form-control" [(ngModel)]="lugar.distancia" name="Distancia" >
							</div>
						</div>
						<div class="form-group">
							<label for="status">Status</label>
							<select name="status" id="status" class="form-control" [(ngModel)]="lugar.status">
								<option value=""></option>
								<option value="1">Activo</option>
								<option value="2">Inactivo</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Descripcion">Descripción del negocio</label>
							<textarea name="Descripcion" class="form-control" [(ngModel)]="lugar.descripcion" rows="4"></textarea>
						</div>
						<hr>
						<h3>Datos de direccion</h3>
						<div class="well">
							<form action="">
								<label>Buscar direccion en Google Maps</label>
								<input type="text" [formControl]="searchField" class="form-control">
							</form>
							<ul class="list-group">
								<li class="list-group-item" *ngFor="let result of results$ | async">{{result.formatted_address}}</li>
							</ul>
						</div>
						<div class="form-group">
							<label for="Domicilio">Calle y numero</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.domicilio" name="Domicilio" >
							</div>
						</div>
						<div class="form-group">
							<label for="Ciudad">Ciudad</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.ciudad" name="Ciudad" >
							</div>
						</div>
						<div class="form-group">
							<label for="Pais">Pais</label>
							<select name="Pais" id="Pais" class="form-control" [(ngModel)]="lugar.pais">
								<option value=""></option>
								<option value="México">México</option>
								<option value="Colombia">Colombia</option>
								<option value="Peru">Peru</option>
								<option value="Estados unidos">Estados unidos</option>
							</select>
						</div>
						<div class="form-group text-right">
							<button class="btn btn-primary" (click)="guardarLugar()" style="margin-right: 10px;">
								<span class="glyphicon glyphicon-send"></span> Enviar
							</button>
							<a class="btn btn-default" routerLink="/lugares">
								<span class="glyphicon glyphicon-remove"></span> Cancelar
							</a>
						</div>

					</form>
				</div>
			</div>
		</div>
	</div>
</div>

app,module.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'
import { FormsModule,ReactiveFormsModule  } from '@angular/forms'

import { AgmCoreModule } from '@agm/core'
import { ResaltarDirective } from './directives/resaltar.directive'
import { ContarClickDirective } from './directives/contar-clicks.directive'
import { Routes, RouterModule } from "@angular/router"
import { DetalleComponent } from "./detalle/detalle.component"
import { LugaresComponent } from "./lugares/lugares.component"
import { ContactoComponent } from "./contacto/contacto.component"
import { CrearComponent } from "./crear/crear.component"

import { LugaresService } from "./services/lugares.service"

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';

import { HttpModule } from '@angular/http'

import { LinkyfystrPipe} from './pipes/linkifystr.pipe'

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LoginComponent } from './login/login.component';
import { RegistroComponent } from './registro/registro.component';

import { AutorizacionService } from './services/autorizacion.service'

import { AngularFireAuthModule } from 'angularfire2/auth'
import { MyGuard } from './services/my-guard.service'


const appRoutes: Routes = [
  { path: '', component: LugaresComponent },
  { path: 'lugares', component: LugaresComponent },
  { path: 'detalle/:id', component: DetalleComponent },
  { path: 'contacto', component: ContactoComponent },
  { path: 'crear/:id', component: CrearComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registro', component: RegistroComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective,
    ContarClickDirective,
    DetalleComponent,
    LugaresComponent,
    ContactoComponent,
    CrearComponent,
    LinkyfystrPipe,
    LoginComponent,
    RegistroComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyC5Cd6Tiu3oqs69v1GDk5_aTCwOk8B8ZIM'
    }),
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    HttpModule,
    BrowserAnimationsModule,
    AngularFireAuthModule,
    ReactiveFormsModule
  ],
  providers: [LugaresService, AutorizacionService,MyGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Francisco Manuel Velásquez Escobar

Hace 8 años

Hola, gracias Carlos! me ayudó a solventar algunas dudas.

Francisco Manuel Velásquez Escobar

Hace 8 años

Carlos me ha funcionado el debounceTime agregándolo de la siguiente manera:

this.results$ = this.searchField.valueChanges
		.pipe(
		debounceTime(500)
		,switchMap(query => this.http.get(`${URL}?address=${query}`))
		,map(response => response.json().results)
		);
		this.results$.subscribe()

No olvides importarlo desde los operadores de rxjs:

import { switchMap, map, debounceTime } from 'rxjs/operators';

Saludos!

Comentarios (17)17 comentarios

Luis Sarmiento

Hace 7 años

Miguel Fernando Urquijo Gómez

Alexis Antonio Moraga Gallardo

Hace 9 años

Nyxent Corp

Kevin Lozoya Giner

Edwin Alberto Guerrero Acosta

Jonathan Jiménez

Wilson Fabian Pérez Sucuzhañay

Héctor Daniel Vega Quiñones

Profesor

Abigail Hernández Ponce

Hace 3 años

Camilo Arango Ochoa

Darwel Duran

Carlos Uriel de Jesus Sánchez González

Marwin Gelvez

Nelson Oswaldo Gonzalez Santiago

Jessie Buckland Pérez

Irving Sarmiento

XAVIER MALDONADO

Diego Forero

Team Platzi

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina