Validaciones de Inputs en Formularios Reactivos con Angular

Clase 17 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Cómo mejorar la gestión de inputs y formularios en Angular?

Dominar la validación y gestión de inputs en Angular no solo optimiza tu aplicación, sino que logra impresionantes resultados. Cuando se trata de formularios, la eficiencia y manejabilidad son fundamentales. Hoy verás cómo implementar mejoras significativas en la validación y gestión de inputs dentro de Angular, asegurando que tus tareas no solo se añadan correctamente, sino que también interactúen de manera óptima con tu aplicación.

¿Qué problema estamos solucionando con los inputs?

Un problema común que puede surgir al añadir tareas en una aplicación es ver inputs no deseados. En particular, puedes notar que al agregar una nueva tarea:

El input no se limpia automáticamente al confirmar la acción.
Es posible introducir tareas vacías o solo con espacios.

Estos problemas no solo pueden ser frustrantes para el usuario, sino que también pueden afectar tu lógica de negocio.

¿Cómo implementar validaciones efectivas utilizando Reactive Forms?

La solución más robusta al tratar con formularios en Angular es adoptar los Reactive Forms. Algunos pasos clave incluyen:

Importar el módulo: Inicialmente, asegúrate de importar ReactiveFormsModule en tu componente.
Crear un form control: Esto te permite manejar el estado de un input de manera profesional. A continuación se presenta la forma de crear un controlador:
```
import { FormControl, Validators } from '@angular/forms';

newTagsControl = new FormControl('', {
  validators: [Validators.required, Validators.nullValidator],
});
```
Aquí, newTagsControl actúa como un controlador de formularios donde:
- Se inicializa vacío.
- Se definen validaciones para asegurar que no acepte entradas nulas y que sea requerido.

Asociar el control al input en HTML: Ahora, tu input HTML necesita integrar este control:

<input type="text" [formControl]="newTagsControl" (keydown.enter)="changeHandler()">

¿Cuáles son las funcionalidades cruciales que necesitamos añadir?

Para una lógica de aplicación sólida, identificamos algunas funcionalidades críticas:

Evento keydown: Ejecutar lógica solo cuando se presione Enter.

Validación del input: El FormControl incluye un indicador .valid proporcionando su estado de validez.

if (this.newTagsControl.valid) {
  const value = this.newTagsControl.value;
  // Lógica para agregar la tarea
  this.agregarTarea(value);
  this.newTagsControl.setValue('');  // Limpiar el campo
}

Manejo de errores personalizados: Implementar una validación adicional para detectar y prevenir entradas compuestas solo por espacios.

¿Cómo dar el siguiente paso?

Nuestro reto para ti es mejorar esta validación, incluyendo lógica para prevenir que las entradas sean solo espacios. Practicar esta implementación te ayudará a afinar tus habilidades en la gestión de formularios en Angular.

No olvides que al dominar estas técnicas, aumentará no solo la eficiencia de tu código, sino también la experiencia de tus usuarios. Ahora es el momento de aplicar y personalizar lo que has aprendido. ¡Adelante y sigue codificando!

Brandon Lee Aguero Fernandez

student•

Busque y busque y me encontré con pattern y bueno aplique una expresión regular ayudandome de chatgpt

validators: [
  Validators.required,
  Validators.pattern('^\\S.*$'),
  Validators.minLength(3),
],

Luego usando trim(), para eliminar los espacios al inicio y al final, por si las dudas jejeje

this.tasks.update((previous) => [
  ...previous,
  { title: value.trim(), completed: false },
]);

Vicente Benavides

student•

Si es inválido o si son espacios en blanco, lo ignoro. Le quito espacios en blanco al guardar el value también.

Juan Fernando López Hernández

student•

Yo lo hice de esta manera:

Alexander Esteban Zapata

student•

Cómo recomendación, para que se vea mas bonito si ya obtuviste el valor y lo guardas en la variable value, usala de nuevo en el método addTask

Excelente trabajo compañero

Ivan Ramirez

student•

Danny Alejandro fernandez gallego

student•

    taskinput = new FormControl('',{
        nonNullable:true,
        validators:[
          Validators.required,
          Validators.pattern('^\\S.*$'),
          Validators.minLength(3),
          Validators.maxLength(50)
        ]
    });

Kevin Alfonso Olivella Felizzola

student•

Excelente aporte. Me pareció mejor esta solución con Validators, ya que se puede minimizar incluso el código. Y es cierto que determinar un min y un max de caracteres.

Rafael Bautista

student•

if(this.newTaskCtrl.valid && this.newTaskCtrl.value.trim().length > 5){
    const value = this.newTaskCtrl.value.trim();
    this.addTask(value);
    this.newTaskCtrl.setValue('');
}
```Esta es la forma en la que realice la validación para evitar que se envíen valores compuestos solo de espacios. También añadí una validación para que el tamaño del texto de la tarea sea mayor que 5 caracteres.

Alexander Esteban Zapata

student•

que tal si la tarea es una palabra como leer, o llamar, no la va a tomar, quizá tendrías que añadir una advertencia al usuario para que tenga presente esa regla aunque yo la quitaría y así darle flexibilidad al usuario, aunque entiendo que quizá lo haces por practicar.

Excelente trabajo compañero

Juan Antonio Galdo Ustares

student•

Yo lo solucione así, aun que depende de la lógica de negocio, en este caso no quisiera que exista un especio al inicio de la palabra.

Reinaldo Mendoza

student•

Buen punto, depende de la logica de negocio

Juan David Gutierrez Castaño

student•

Yo me emocione un poco y resulte creando un validador como funcion exportable y 2 spans, tambien trate de crear un metodo que me permitiera unicamente mostrar los spans cuando se le oprimiera enter, y que no tuviera desenfoque, pero lo unico que logre fue que con el input vacio si admitiera el enter para mostrar los spans; al comienzo resolvi el reto usando un "validator" predeterminado llamado "pattern" que usa algo llamado "Regex", es muy util pero poco escalable o personalizable, e igual de eficiente que la segunda solucion que hice.

Valeria Giraldo Pinzón

student•

Me funcionó agregando el método "trim()" : "&& this.newTaskCtrl.value.trim().length > 4" en la clase: "changeHandler()". El resultado del código es el siguiente:

changeHandler() {

if (this.newTaskCtrl.valid && this.newTaskCtrl.value.trim().length > 4){

const value = this.newTaskCtrl.value.trim();

this.addTask(value);

this.newTaskCtrl.setValue("");

}

¿ Cómo lo encontré?: Me funcionó leer los comentarios de mis compañeros. Luego googlie y éste fué el resultado: "Para validar campos en Angular y evitar solo espacios, usa el método trim() para eliminar espacios al principio y al final de una cadena y luego comprueba si la cadena resultante está vacía con una condición".

Saludos😝

Rafhael Isaias Echevarría Mamani

student•

Mi solución con custom validators

Paulina Ignacio Sanvicente

student•

Aquí pueden revisar la documentación de Angular y FormControl.

https://angular.dev/api/forms/FormControl#usage-notes

Gustavo Fernández

student•

Esta es mi solución:

  changeHandler() {
    if (this.newTaskCtrl.valid && this.newTaskCtrl.value.trim() !== '') {
      const newTask = this.newTaskCtrl.value;
      this.addTask(newTask);
      this.newTaskCtrl.setValue('');
    }
  };

Rody Josue Ccoyllo Cule

student•

Les comparto mi solución:

  changeHandler() {
    if (this.tacksControl.valid && this.tacksControl.value.trim() != '') {
      const newTack = this.tacksControl.value;
      this.addTack(newTack);
      this.tacksControl.setValue('');
    }

  }

```  changeHandler() {    if (this.tacksControl.valid && this.tacksControl.value.trim() != '') {      const newTack = this.tacksControl.value;      this.addTack(newTack);      this.tacksControl.setValue('');    }
  }

Niller David Yanes Diaz

student•

Solución: Creé un custom validators.

 newTaskCrtl = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, this.notOnlySpaceValidator],
  });
``` ```js
  notOnlySpaceValidator(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (value.split('').every((char: string) => char === ' ')) {
      return { customError: 'The title don´t have only spaces' };
    }
    return null;
  }

Cesar Augusto Avendaño Gamboa

student•

Comparto aporte el cual agregué esta validacion el cual hago uso de la funcion trim() , lo que hace es eliminar los espacios y valido si es diferente de vacio

changeHandler() {
    if (this.newTaskCtrl.valid){
      const value = this.newTaskCtrl.value;
      if (value.trim() != ''){
        this.addTask(value);
        this.newTaskCtrl.setValue('');
      }
    }
  }

Ayriel Noriega

student•

Tambien podemos usar el metodo reset del FormControl:

  changeHandler() {
    if (this.newTaskControl.valid) {
      const value = this.newTaskControl.value;
      this.addTask(value);
      this.newTaskControl.reset();
    }
  }

Ayriel Noriega

student•

Tambien podemos usar reset() del FormControl:

  changeHandler() {
    if (this.newTaskControl.valid) {
      const value = this.newTaskControl.value;
      this.addTask(value);
      this.newTaskControl.reset();
    }
  }

Kenneth Leonel Cruz Ordoñez

student•

Utilizando expresiones regulares "detecto" si el valor del input inicia y contiene de forma consecutiva espacios en blanco, de ser asi, este valor no se agrega a la lista TO-DO

Jose Luis Bedoya

student•

lo hice con un .trim()! Me parecio lo más práctico: addTodo() { const newValue = this.newTodoCtrl.value.trim(); if (newValue) { const newTodo = { name: newValue, completed: false, id: this.generateId(), }; this.todos.update((todos) => [...todos, newTodo]); this.newTodoCtrl.setValue(''); } else { alert('Please enter a task'); this.newTodoCtrl.setValue(''); } }

  addTodo() {
    const newValue = this.newTodoCtrl.value.trim();
    if (newValue) {
      const newTodo = {
        name: newValue,
        completed: false,
        id: this.generateId(),
      };

      this.todos.update((todos) => [...todos, newTodo]);
      this.newTodoCtrl.setValue('');
    } else {
      alert('Please enter a task');
      this.newTodoCtrl.setValue('');
    }
  }

Pedro Muñoz Becerra

student•

Mi solución:

Al if dentro del inputHandler, agregarle que si el valor es válido con un .trim() al final

if(this.newTaskControl.valid && this.newTaskControl.value.trim()) {
  this.addTask(this.newTaskControl.value);
  this.newTaskControl.setValue('');
}