Nello script #279 abbiamo visto come creare un component riutilizzabile per mostrare un campo su una form. All'interno del component abbiamo utilizzato un altro component che aveva come scopo quello di mostrare i messagi di errore. In questo script analizziamo in dettaglio questo component. Come prima cosa, questo component accetta in input il controllo e la form.

export class ValidationEditorComponent implements OnInit {
  @Input() form: NgForm;
  @Input() control: FormControl;
}

<ng-container *ngIf="control.touched && form?.submitted">
  <span *ngFor="let p of control.errors | mapToArray">
    <span class="help-block">{{p}}</span>
  </span>
</ng-container>

La parte interessante del component è ancora una volta il template HTML. Questo template mostra il container quando il controllo in binding non è valido. Gli errori del controllo vengono prima trasformati in un array e poi mostrati tramite la direttiva ngFor. In questo caso mostriamo il codice dell'errore, ma volendo possiamo creare una pipe che prende in input il codice di errore e ritorna un messaggio leggibile per l'utente.