Cómo manejar correctamente la selección de casillas mutuamente excluyentes con formularios reactivos

Manejo adecuado de la selección de casillas de verificación mutuamente excluyentes con formularios reactivos en Angular

El manejo de la selección de casillas de verificación en Angular puede resultar complicado, especialmente cuando la funcionalidad deseada implica que ciertas casillas sean mutuamente excluyentes. En este artículo, abordaremos una situación específica: cómo manejar correctamente la selección de cuatro casillas de verificación (ALL, FirstName, LastName y MiddleName), asegurando que cuando una de ellas se seleccione, las demás se deseleccionen automáticamente.

Problemática inicial

El problema planteado es el siguiente: al cargar la página, la casilla "ALL" debe ser la única seleccionada. Si se selecciona alguna de las otras casillas, "ALL" debe ser deseleccionada. Si se hace clic en "ALL" nuevamente, las otras casillas también deben deseleccionarse. Sin embargo, el comportamiento actual permite que "ALL" permanezca seleccionado siempre y cuando las otras casillas no se deseleccionen manualmente, lo cual es una experiencia de usuario poco óptima.

Implementación

Para resolver este problema, empleamos formularios reactivos de Angular. A continuación, se presenta una implementación detallada que permite un correcto manejo del comportamiento de las casillas de verificación.

Estructura del formulario en HTML

<form [formGroup]="reportListFG">
  <app-form-type-filter 
                  [formGroup]="reportListFG.get('filterGroup')"
                  (formTypeFilterChanged)="onFormTypeSelectionChange($event)"
                  (clear)="clearReceipt($event)" 
                  #formFilter>
  </app-form-type-filter>
</form>

Configuración del componente en TypeScript

Creamos un formulario reactivo en el componente principal:

this.reportListFG = this.fb.group({
  Address: [[]],
  PhoneNumber: [[]],
  filterGroup: this.fb.group({
    ALL: [true],
    FirstName: [false],
    LastName: [false],
    MiddleName: [false],
  }),
});

// Escuchar cambios en el formulario y manejar la lógica de selección
this.reportListFG.get('filterGroup').valueChanges.subscribe(values => {
  this.handleCheckboxSelection(values);
});

Manejo de la selección de casillas de verificación

Implementamos la lógica dentro de una función que se encarga de manejar las selecciones y asegurarse de que la lógica de exclusividad se respete.

handleCheckboxSelection(values: any) {
  const allSelected = values.ALL; 

  // Si "All" está seleccionado y otra casilla está marcada, desmarcar "All"
  if (allSelected && (values.FirstName || values.LastName || values.MiddleName)) {
    this.reportListFG.get('filterGroup')?.patchValue(
      {
        ALL: false
      },
      { emitEvent: false } // Evitar bucles infinitos
    );
  }

  // Si "All" está seleccionado, asegurarse de que las otras casillas permanezcan desmarcadas
  else if (allSelected) {
    this.reportListFG.get('filterGroup')?.patchValue(
      {
        FirstName: false,
        LastName: false,
        MiddleName: false
      },
      { emitEvent: false } // Evitar bucles infinitos
    );
  }
}

Conclusión

Usando la estructura de formularios reactivos de Angular y la suscripción a cambios de valor, hemos implementado una solución que asegura que las casillas de verificación "ALL", "FirstName", "LastName" y "MiddleName" funcionen de manera mutuamente excluyente. Esta implementación mejora la experiencia del usuario y garantiza un comportamiento lógico en la selección de las casillas.