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

Enlaces externos