Manejo de formularios en Angular

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 },
]);

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

Yo lo hice de esta manera

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

Me gusta más la practica de solo capturar cuando el input no sea valido y realizar las operaciones necesarias fuera del if

  // methods
  addTodo() {
    if (!this.titleControl.valid) {
      return;
    }

    const title = this.titleControl.value;

    const newTodo: Task = {
      id: Date.now(),
      title,
      completed: false,
    };

    this.todos.update((todo) => [...todo, newTodo]);
  }

Para este logica tome los siguientes escenarios.

Algunas tareas podría venir con espacios y serán válidas como por ejemplo.

• Course angular 17
• Course Unit test.

Pero si la casilla solo tiene espacios no se agregara ningún nuevo ítem.

Custom Validación de espacios.

import { AbstractControl, ValidationErrors } from '@angular/forms';  
    
export class TaskWhiteSpace {  
    static noSpaceAllowed(control: AbstractControl) : ValidationErrors | null {  
        if (!control.value || control.value == undefined) return null;

        let chars = Array.from(control.value);
        let counterSpaces = 0;

        chars.forEach(c => {if (c == ' ') counterSpaces++ });

        if (chars.length > counterSpaces) return null;
        return {noSpaceAllowed: true}  
    }  
}

y ya en el componente importo el custom de validación personalizada.

Para esta actividad tome base la siguiente fuente.
ejemplo

✅

Usé una expresión regular para el reto y creé mejor solo una función para agregar tareas 👇

agregarTarea(){
    const regex = /^\s+$/;

    if(this.newTaskCtrl.valid && !regex.test(this.newTaskCtrl.value)){
      const value = this.newTaskCtrl.value;
      const tarea = {
        id: Date.now(),
        title: value,
        completed: false,
      }
      this.tasks.update((tasks => [...tasks, tarea]));
    }
    
    this.newTaskCtrl.setValue('');
  }