Angular: 36. Formularios. Validación por data. Creando el formulario

Vamos a preparar un nuevo formulario para empezar a ver la validación del mismo por data, es decir, que la validación de los campos la tendremos en el componente y no en el html.

Siguiendo el proyecto anterior, creamos un nuevo componente "data", y modificamos el "app.component.html" para que lo muestre, y deje de mostrar el componente antiguo "template".

A continuación, en el html del componente "data" ponemos el siguiente formulario:

<h4>Formularios <small>data</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, ya podemos empezar a trabajar.

Para poder utilizar la validación por data, lo primero que tenemos que hacer es importar el ReactiveFormsModule en el "app.module.ts":

Después, nos vamos al TypeScript del componente "data" y realizamos las siguientes modificaciones:

Como se puede ver, primero importamos los componentes FormGroup, FormControl, y Validators de Angular.

Dentro de la clase, creamos una variable llamada "formulario" de tipo "FormGroup", y la inicializamos en el constructor. Al inicializarla, estamos creando un objeto con los atributos nombre, apellido, y correo. Al atributo nombre le estamos poniendo el nombre "Benito" por defecto, mientras que los otros dos atributos los dejamos en blanco.

En esas funciones "new FormControl()" es donde, en un futuro, pondremos las validaciones específicas de cada campo, pero esto lo explicaremos más adelante.

Lo último que hacemos es crear una función "guardarCambios()" donde mostramos el contenido del formulario. Esta función es la que llamaremos desde el html al hacer submit del formulario.

Por último, modificamos el html del componente como sigue:

Como se puede ver, sólo hemos modificado la etiqueta "form", añadiendo 3 cosas:

La primera es el "formGroup", en la que estamos indicando a Angular que el formulario que vamos a validar es el objeto "formulario" que creamos en el componente.

La segunda es el "ngSubmit", donde estamos indicando que la función del componente que se debe ejecutar al pulsar el botón de submit del formulario es "guardarCambios()".

La tercera es el "novalidate", donde simplemente estamos desactivando la validación de campos que hace por defecto html5, porque seremos nosotros quienes nos encarguemos de eso.

Ahora, arrancamos la aplicación y hacemos click en el botón de guardar sin escribir en ningún campo, y este debería ser el resultado:

Como se puede ver, el nombre contiene el valor que le pusimos por defecto y el apellido y el correo se encuentran vacíos.

Y eso es todo. Ya tenemos un formulario base desde el que empezar a trabajar.