En el siguiente ejercicio voy a introducir un control de un formulario, un campo de edición de texto <input>
, para demostrar el data binding a media que se introduzcan carácteres se irá actualizando el mismo contenido en un texto más abajo.
También mostraré como cambiar el contenido del campo de edición desde el componente cuando se pulse un botón.
Efecto final:
Registrando el módulo de formularios reactivos
En [src/app/app.module.ts] añadimos la siguiente línea en la cabecera para importar el módulo ReactiveFormsModule
y poder usar la clase FormControl
.
import { ReactiveFormsModule } from "@angular/forms";
En la sección imports
del decorador @NgModule
:
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule], //<------
providers: [],
bootstrap: [AppComponent]
})
Componente
Enn [src/app/app.component.ts] declaro un atributo de la clase que es una instancia de FormControl
, usando el parámetro del constructor
import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "basic-form";
email = new FormControl(""); // <----
}
Si quisiésemos definir un texto por defecto cuando se cargue componente podemos pasar la cadena al constructor en lugar de la cadena vacía de arriba.
El control en la vista
El formulario se define como un grupo de controles. Cada control tendrá un nombre y una configuración. Esa definición permite establecer un valor inicial al control.
En [src/app/app.component.html]:
<div class="container">
<label>
Email:
<input type="text" [formControl]="email">
</label>
</div>
Usamos el binding unidireccional ([box] del modelo a la vista) conformControl
para asociar el atributo de la clase con el elemento de la plantilla usando su nombre.
Controlando el valor del campo de edición
<p>Value: {{ email.value }}</p>
Actualizando el valor del formulario
Ahora se trata de cambiar el valor inicial del campo de edición mediante código sin interacción del usuario.
Podemos hacerlo en el propio constructor (sólo lo hace una vez) o de forma dinámica usando el método .setValue()
de la instancia FormControl
.
export class AppComponent {
title = "basic-form";
email = new FormControl("ikerlandajuela@gmail.com"); // <----
}
Declaro un método que se ejecutará en respuesta al evento de pulsación en un nuevo botón:
updateEmail() {
this.email.setValue("ikernaix@gmail.com");
}
Data binding bidireccional
Antes de nada para usar la directiva ngModel
en un formulario es necesario importar la clase FormsModule
de "@angular/forms" en [src/app/app.module.ts], esta clase exporta las directivas que necesitamos par poder importarlas en NgModules
.
Para definir el nuevo control <input>
usaré la directiva ngModel
con la sintaxis conocida como banana in a box _ que representa la comunicación bidireccional, (banana) vista a modelo y [box]_ del modelo a la vista.
<section>
<label for="name">
Name:
<input
name="name"
type="text"
[(ngModel)]="name"
placeholder="Contact name"
/>
</label>
</section>
En el componente he sobrecargado el descriptor de acceso set
para ir monitorizando por consola como recibe las cadenas de texto, cada carácter introducido envía todo el contenido de campo de edición, no sólo el último carácter. Igualmente como en el ejemplo anterior puedo definir el contenido desde TypeScript.
export class AppComponent {
title = "basic-form";
email = new FormControl("ikerlandajuela@gmail.com"); // <----
_name: string;
get name(): string {
return this._name;
}
set name(newName: string) {
console.log(newName);
this._name = newName;
}
updateEmail() {
this.email.setValue("ikernaix@gmail.com");
this._name = "Iker";
}
}
Código fuente del proyecto
- angular / src / ui / forms / basic-form.
Enlaces externos
- "Reactive Forms - Angular".
- "Crear un Formulario con Angular 7 y Bootstrap 4 + Validación – Parte 2 (Final)".
- "Validación de formulario Angular con formularios reactivos y controlados por plantillas".
- "Angular 7 Forms Tutorial Example - AppDividend".
- Academia Binaria "Formularios reactivos con Angular".
- Academia Binaria "Formularios, tablas y modelos de datos en Angular".