Formulários Orientados por Modelo

Nesta lição, você conhecerá os formulários orientados por modelo no Angular, que permitem criar rapidamente formulários simples.

Os formulários orientados por modelo usam modelos HTML e diretivas do Angular para tratar facilmente a criação, a validação e o envio de formulários.

Para usar formulários orientados por modelo, importe o FormsModule para o seu módulo Angular:

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

Defina um formulário simples no seu modelo usando a diretiva ngForm:

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

ngModel vincula os controles do formulário às propriedades do componente usando a vinculação bidirecional de dados:

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

Trate facilmente o envio do formulário usando a vinculação de eventos do Angular:

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

O Angular fornece diretivas de validação simples, como required e minlength:

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

Acesse o estado do formulário, como a validade ou o status de interação, por meio de variáveis do modelo:

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

Você aprendeu a criar, vincular, validar e enviar formulários facilmente com formulários orientados por modelo. Continue praticando!