Angular: 31. Formularios. Creando un formulario

Vamos a empezar con una serie de entradas dirigidas a la creación y validación de formularios.

En esta entrada simplemente vamos a crear un formulario y dejaremos para las demás entradas el tema de la validación.

Primero hay que aclarar que existen dos formas de validar un formulario en Angular, mediante Template (la validación se realiza del lado del cliente) y mediante Data (la validación se realiza en nuestro código).
A lo largo de las entradas vamos a ver las dos formas. Empezaremos con Template y luego pasaremos a Data.

Para empezar, nos creamos un nuevo proyecto, y creamos dos componentes en él. Un componente llamado "template" y otro llamado "data", que utilizaremos para crear las validaciones por template y data, respectivamente.

Para empezar, insertamos en el "app.component.html" el componente "template", que es con el que vamos a empezar:

A continuación, sustituimos el código del "template.component.html" por el siguiente formulario:

<h4>Formularios <small>template</small></h4>
<hr>
<form>

  <div>

    <div class="form-group row">
      <label class="col-2 col-form-label">Nombre</label>
      <div class="col-8">

        <input class="form-control"
               type="text"
               placeholder="Nombre">
      </div>
    </div>

    <div class="form-group row">
      <label class="col-2 col-form-label">Apellido</label>
      <div class="col-8">

        <input class="form-control"
               type="text"
               placeholder="Apellido">
      </div>
    </div>

  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">Correo</label>
    <div class="col-md-8">

      <input class="form-control"
             type="email"
             placeholder="Correo electrónico">
    </div>
  </div>



  <div class="form-group row">
    <label class="col-2 col-form-label">&nbsp;</label>
    <div class="input-group col-md-8">
      <button type="submit" class="btn btn-outline-primary">
        Guardar
      </button>
    </div>
  </div>

</form>

Una vez hecho esto, arrancamos la aplicación y debería presentar este aspecto:

Vamos a empezar a modificar el formulario añadiendo al campo nombre los siguientes atributos:

Simplemente añadimos un nombre, la directiva ngModel, y el atributo "required", que sirve para indicar que es obligatorio que el campo esté informado.

Si arrancamos la aplicación y pulsamos en el botón de "Guardar" sin escribir nada en el campo del nombre, nos aparecerá el siguiente mensaje:

Sin embargo, esto no es una validación de Angular, sino que es una validación por defecto que trae el HTLM5.
Nosotros no queremos que HTML5 valide nuestro formulario, sino que queremos validarlo mediante Angular, así que desactivamos la validación de HTML5 añadiendo la etiqueta "novalidate" al formulario:

Ya tenemos listo un formulario simple para empezar a probar validaciones. Sólo vamos a hacer una última modificación para no tener que hacerla luego.
Modificamos el formulario para que llame a una función "guardar" del componente al enviar el formulario:

Por supuesto, creamos la función guardar también en el componente:

Si observamos el código del formulario, el botón "Guardar" es de tipo "submit", lo que significa que al pulsar sobre él, se llamará a la función que indicamos en la directiva ngSubmit del formulario, en este caso la función "guardar" del componente:

Y eso es todo. Empezaremos con las validaciones en la siguiente entrada.