Angular 2 - 8) Agregar mensajes de error al formulario de usuarios

Objetivo:

• Agregar mensajes de validación al formulario

1. Abrir el archivo llamado user-form.component.html y actualizar con la siguiente información:

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

<div class="form-group" [class.has-error]="name.invalid && name.touched">

  <input type="text" placeholder="Nombre" class="form-control" name="name" required [(ngModel)]="newUser.name" #name="ngModel">

  <span class="hel-block" *ngIf="name.invalid && name.touched">El nombre es requerido</span>

</div>

<div class="form-group" [class.has-error]="username.invalid && username.touched">

  <input type="text" placeholder="Nombre de usuario" class="form-control" name="username" required

         [(ngModel)]="newUser.username" #username="ngModel">

  <span class="hel-block" *ngIf="username.invalid && username.touched">El nombre de usuario es requerido</span>      

</div>

<button type="submit"  class="btn btn-primary btn-lg btn-block" [disabled]="userForm.invalid">

    Crear Usuario

</button>

</form>

2. Ejecutar el comando en consola para levantar la aplicación(ng serve) y cuando no ingresamos valores para los valores requeridos muestra los mensajes correspondientes:

Repositorio en GitHub