Angular: 46. CRUD Firebase. Creación del servicio y el formulario

Vamos a continuar con la aplicación, esta vez crearemos el servicio y el formulario.

Lo primero que vamos a hacer es crear el servicio "heroes" por la consola de comandos, como es habitual:

A continuación vamos a crearnos un interface "Heroe", que contendrá todos los atributos de cada héroe y será el tipo de objeto con el que enviaremos la información a la base de datos:

Ahora modificamos el typeScript del componente "heroe", que recordemos que será el formulario, de la siguiente manera:

Como se puede ver, hemos incluido un objeto de tipo interface "Heroe" que hemos tenido que importar. También hemos incluido la función guardar, que será la función que lanzará el botón guardar del formulario, y que de momento sólo muestra por la consola el contenido del objeto "heroe".

A continuación vamos a modificar los html de los componentes.
Vamos a sustituir todo el contenido del fichero "heroes.component.html" por el siguiente:

<h1>Heroes</h1>
<hr>

<div class="row">
  <div class="col-md-12 text-right">
    <button [routerLink]="['/heroe', 'nuevo']"
            class="btn btn-outline-primary"
            type="button"
            name="button">
      Nuevo héroe
    </button>
  </div>
</div>
<br>

<div class="row animated fadeIn fast">
  <div class="col-md-12">

    <div class="table-responsive">

      <table class="table">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nombre</th>
            <th scope="col">Casa</th>
            <th scope="col">Opciones</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>

    </div>

  </div>
</div>

Como se puede ver, no es más que un botón que nos lleva a la página del formulario y una tabla que nos mostrará los datos de todos los héroes.

Y sustituimos el contenido del fichero "heroe.component.html" por el siguiente:

<h3>Heroe <small>nombre...</small></h3>
<button [routerLink]="['heroes']" class="btn btn-outline-danger">Regresar</button>
<hr>

<div class="row animated fadeIn fast">
  <div class="col-md-12">

    <form (ngSubmit)="guardar()" #formulario="ngForm">

      <div class="form-group">
        <label for="txtNombre">Nombre</label>
        <input type="text" name="nombre" id="txtNombre" [(ngModel)]="heroe.nombre"
               class="form-control"
               placeholder="Nombre del héroe"
               required>
      </div>

      <div class="form-group">
        <label for="selCasa">Casa</label>
        <select class="form-control" name="casa" id="selCasa" [(ngModel)]="heroe.casa">
          <option value="DC">DC</option>
          <option value="Marvel">Marvel</option>
        </select>
      </div>

      <div class="form-group">
        <label for="txtBio">Bio</label>
        <textarea type="text" name="bio" id="txtBio" [(ngModel)]="heroe.bio"
               class="form-control">
        </textarea>
      </div>

      <div class="form-group">
        <button [disabled]="!formulario.valid" type="submit" class="btn btn-outline-primary">Guardar cambios</button>
      </div>

    </form>

  </div>
</div>

Como se puede ver, no es más que un formulario con los campos del héroe y un botón que lanzará la función guardar del componente.

Ahora tenemos que modificar el fichero "app.module.ts" con todas las importaciones necesarias para que funcione la aplicación:

Y con esto tendríamos terminado también el servicio y el formulario. Si arrancamos la aplicación, debería verse tal que así:

Si pulsamos en el botón de nuevo héroe, nos llevará al formulario, y si lo rellenamos y pulsamos en el botón de guardar, debería mostrarnos por consola el valor de los campos:

Y eso es todo. Ya estaría terminada la base de la aplicación. En las próximas entradas trataremos el CRUD en sí.