Validation de la liste de cases à cocher sous forme de gabarit (formulaires non réactifs) Angulaire 2

Question

Comment puis-je valider la vérification qu'au moins une case à cocher est sélectionnée dans une liste de cases à cocher dans les formulaires Angular 2?

Code HTML.

<div class="form-control" style="max-height: 300px; overflow: auto"> 
     <div *ngFor="let item of items" class="checkbox"> 
      <label for="{{item.id}}"> 
       <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" /> 
       <span class="text-body">{{item.name}}</span> 
      </label> 
     </div> 
    </div> 
    <div *ngIf="!isAtleastOneItemSelected()" class="alert alert-error"> 
     Select at least one item 
    </div> 

Code de composant.

public isAtleastOneItemSelected() { 
    const selectedItems = this.items.filter((item) => item.isSelected); 
    if (selectedItems.length > 0) { 
     return true; 
    } else { 
     return false; 
    } 
} 

J'ai déjà vérifié la manière réactive sous forme de le faire here. Donc, voulait vérifier comment nous pouvons le faire dans les formulaires de modèle. En utilisant le code que j'ai collé ci-dessus, les choses marchent bien, mais au chargement de la page, le message d'erreur apparaît car il n'y a pas de vérification de la présence de saleté ou de contact. J'étais coincé avec ce problème.

Toute aide à ce sujet serait appréciée.

Merci.

Answer 1

Regardez, vous devrez adapter:

<div *ngFor="let item of items; let i = index" class="checkbox"> 
     <label for="{{item.id}}"> 
      <input type="checkbox" value="{{item.id}}" required id="{{item.id}}" [(ngModel)]="item.isSelected" (change)="CheckBoxChanged(i,$event)"/> 
      <span class="text-body">{{item.name}}</span> 
     </label> 
</div> 
    <div [hidden]="isAtleastOneItemSelected()" class="alert alert-error"> 
     Select at least one item 
    </div> 

mettre votre logique de contrôle ici ...:

CheckBoxChanged(i,e){ 
    console.log(i); 
    if (e.target.checked) 
     console.log("checked"); 
    else 
     console.log("unchecked"); 
} 

Answer 2

Eh bien, je vois deux options viables ici. Je voudrais aller avec le premier, juste parce que je suggérerais d'éviter toutes les méthodes dans le modèle, parce que vous ne pouvez pas restreindre quand et à quelle fréquence la méthode sera déclenchée. Surtout si vous avez une vue avec de nombreuses façons de modifier les données d'une manière ou d'une autre, la méthode sera déclenchée même si elle n'a rien à voir avec les cases à cocher. Recherchez un échantillon plus tard.

donc ce que je ferais, est de changer les

*ngIf="!isAtleastOneItemSelected()" 

pour vérifier une variable à la place:

*ngIf="nonChecked" 

et ont un certain type d'événement change lorsque les cases sont cliqués, qui tire certains procédé, par exemple:

check() { 
    const selectedItems = this.items.filter((item) => item.isSelected === true); 
    if (selectedItems.length > 0) { 
    this.nonChecked = false; 
    } else { 
    this.nonChecked = true; 
    }  
} 

Maintenant, ce ne sera tiré que lorsque les cases à cocher sont touchées.

---

L'autre option que je vois, si vous voulez garder la configuration similaire, est d'envelopper les cases à cocher dans un formgroup et regarder quand le groupe est touché et seulement alors afficher le message d'erreur s'il n'y a aucun élément vérifié . Donc, vous envelopper les cases à cocher dans un groupe:

<div ngModelGroup="checkboxes"> 
    <!-- .... --> 
</div> 

et vous pouvez faire:

<div *ngIf="!isAtleastOneItemSelected() && f.controls?.checkboxes?.dirty"> 
    Select at least one item 
</div> 

où f est le nom du formulaire. Mais comme mentionné précédemment, cela déclenchera des détections de changement et fera n'importe quoi d'autre dans le DOM. Voici un exemple de cette solution, et où nous avons seulement un autre champ dans DOM (voir la console), donc si vous avez beaucoup de choses en cours, je proposerais la première solution :) Mais dans les deux cas, les deux fonctionnent!

http://plnkr.co/edit/VuLNR8H3lasFoK7mRDlG?p=preview