Angular 2 - 6) Crear un nuevo formulario para agregar un usuario

Objetivo:

• Crear un formulario.

1. Abrir una consola y posicionarse en la raíz del proyecto y ejecutar el siguiente comando para crear un nuevo componente:

ng generate component userForm

2. Abrir el archivo user-form.component.html y agregar con la siguiente información:

<form>

<div class="form-group">

  <input type="text" placeholder="Name"  class="form-control" name="name" required>

</div>

<div class="form-group">

  <input type="text" placeholder="User name" class="form-control" name="username" required>

</div>

<button type="submit"  class="btn btn-primary btn-lg btn-block">

    Crear Usuario

</button>

</form>

3. Abrir el archivo llamado user-form.component.css y agregar la siguiente información:

form {

  padding:10px;

  background-color: #ecf0f1;

  border-radius: 3px;

}

4. Abrir el archivo llamado users.component y agregar el elemento creado en los pasos anteriores:

<main>

<div class="container">

  <div class="col-sm-4" *ngIf="users">

    <ul class="list-group">

      <li *ngFor="let u of users" (click)="selectUser(u)" class="list-group-item" [class.active]="u == activeUser">

          {{u.name}} {{u.username}}

      </li>

    </ul>

    <app-user-form></app-user-form>

  </div>

  <div class="col-sm-8 user-actived">

    <div *ngIf="activeUser">

      <h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2>

    </div>

    <div *ngIf="!activeUser">

      <h2>Seleccionar un usuario</h2>

    </div>

  </div>

</div>

</main>

5. Ejecutar en la consola ng serve y la aplicación debería mostrar algo como lo siguiente:

Repositorio en GitHub