Negli script precedenti abbiamo visto come creare e utilizzare una template variable assegnandole il valore della direttiva ngForm. In questo script usiamo la stessa tecnica per mostrare in linea gli errori di ogni singolo campo della form.

Supponiamo di avere una form con due campi obbligatori. Il modo migliore per mostrare i messaggi di errore è visualizzarli accanto al campo invece di mostrare in fondo alla form un generico messaggio di dati non validi come visto nello script precedente. Per fare questo dobbiamo creare una template variable per ogni campo e assegnare a ogni variabile il valore della direttiva ngModel che contiene lo stato di ogni campo compreso lo stato della validazione.

<input type="text" name="description" [(ngModel)]="description" required #description="ngModel">
<span *ngIf="description.valid">obbligatorio</span>
<input type="text" name="name" [(ngModel)]="name" required #name="ngModel">
<span *ngIf="name.valid">obbligatorio</span>

Come possiamo vedere, la proprieta valid della direttiva ngModel ci dice se il campo è valido o meno.
In questo modo però, quando la form si apre e i campo sono vuoti, otteniamo immediatamente il messaggio di errore.

Per la User Experience questo comportamente non è ideale, ma possiamo ricorrere alla proprietà touched di ngModel che ci dice se il campo è stato utilizzato dall'utente (ad esempio ha modificato il valore).

<input type="text" name="description" [(ngModel)]="description" required #description="ngModel">
<span *ngIf="description.touched && description.valid">obbligatorio</span>
<input type="text" name="name" [(ngModel)]="name" required #name="ngModel">
<span *ngIf="name.touched && name.valid">obbligatorio</span>