checkbox - uso - Grupo angular2 de casillas de verificación con el atributo requerido

tipos de checkbox

Question

Quiero crear un formulario basado en plantilla en Angular2 ( RC5 ), que incluirá un grupo de casillas de verificación, limitadas a atributos específicos de un objeto. En este momento, tengo dicho grupo, vinculado a la matriz correspondiente como:

<div class="checkbox" *ngFor="let prop of properties">
  <label>
    <input type="checkbox" name="option" id="option [(ngModel)]="prop.state"/> 
    {{prop.name}}
  </label>
</div>

Aunque esto es bastante sencillo, no puedo entender cómo agregar un atributo requerido a este grupo de casillas de verificación. Lo que quiero decir con eso es que necesito forzar al usuario a seleccionar POR LO MENOS una de las casillas de verificación del grupo, de lo contrario la validación del formulario fallará.

¿Algunas ideas?

Answer 1

Supongo que tiene un objeto o matriz con todos sus estados, si estoy leyendo correctamente, es decir,

properties = [
  { state: false },
  { state: false },
  { state: false },
  // ... etc
];

Podría averiguar si al menos uno está marcado escuchando (ngModelChange) en cada uno de los elementos. Cuando se activa, puede verificar para asegurarse de que al menos uno de los estados de prop es verdadero, es decir, en su archivo de plantilla:

<input type="checkbox" name="option" id="option" [(ngModel)]="prop.state" (ngModelChange)="onCheckboxChange()"/> 

Y en su clase, tenga un campo como atLeastOnePropIsTrue , y luego su función onCheckboxChange puede verse así:

function onCheckboxChange() {
    this.atLeastOnePropIsTrue = this.properties.find(a => a.state === true) != null;
}

No es exactamente bonito, pero funcionaría.