Form basati su template

Questa lezione introduce i form basati su template in Angular, che consentono di creare rapidamente form semplici.

Che cosa sono i form basati su template?

I form basati su template utilizzano template HTML e direttive Angular per gestire facilmente la creazione, la convalida e l'invio dei form.

Importazione di FormsModule

Per utilizzare i form basati su template, importare FormsModule nel modulo Angular:

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

Creazione di un form semplice

Definire un form semplice nel template utilizzando la direttiva ngForm:

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

Binding bidirezionale con ngModel

ngModel collega i controlli del form alle proprietà del componente utilizzando il data binding bidirezionale:

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

Invio del form

Gestire facilmente l'invio del form utilizzando l'event binding di Angular:

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

Convalida del form

Angular fornisce direttive di convalida semplici, come required e minlength:

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

Accesso allo stato del form

Accedere allo stato del form, ad esempio alla validità o allo stato touched, tramite variabili del template:

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

Riepilogo

Ha imparato a creare, collegare, convalidare e inviare facilmente form basati su template. Continui a fare pratica!