Formularios basados en plantillas

En esta lección conocerá los formularios basados en plantillas de Angular, que permiten crear rápidamente formularios sencillos.

Los formularios basados en plantillas usan plantillas HTML y directivas de Angular para gestionar fácilmente la creación, validación y envío de formularios.

Para usar formularios basados en plantillas, importe FormsModule en su módulo de Angular:

import { FormsModule } from '@angular/forms';

Defina un formulario sencillo en su plantilla mediante la directiva ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

ngModel enlaza los controles del formulario con las propiedades del componente mediante el enlace de datos bidireccional:

<input [(ngModel)]="user.name" name="username">

Gestione fácilmente el envío del formulario mediante el enlace de eventos de Angular:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Angular proporciona directivas de validación sencillas, como required y minlength:

<input name="username" ngModel required minlength="4">

Acceda al estado del formulario, como su validez o el estado de interacción, mediante variables de plantilla:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Ha aprendido a crear, enlazar, validar y enviar formularios fácilmente con formularios basados en plantillas. ¡Siga practicando!