J'avais une condition dans mon formulaire
réactif où une case à cocher
sélectionnée, le bouton
sera activé, et s'il n'y en a pas case à cocher
cochée, elle restera désactivée, le problème est que j'avais la fonction selectAll
, qui si j'ai cliqué, elle cochera toutes les cases et activera le bouton
, puis si je désélectionne la case à cocher
après avoir sélectionné toutes les fonctions , le bouton d'envoi doit être activé jusqu'à ce que toutes les cases soient désélectionnées, voici ce que j'avais essayé:
fichier ts
<div *ngIf="isShowResponse"> <p>Inquiry Response</p> <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()"> <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index"> <ng-container [formGroupName]="i"> <input type="checkbox" formControlName="isChecked" (change)="changeCheck($event)"> {{ summon.get('isChecked').value ? 'selected' : 'select' }} </ng-container> </ng-container> <button [disabled]="disabledButton">Submit</button> </form> <button (click)="selectAll()">Select All</button> </div>
fichier html
selectAll() { this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true)); return this.disabledButton = false; } changeCheck(event){ this.disabledButton = !event.target.checked; }
censé être après Fonction sélectionner tout
, le bouton d'envoi sera activé jusqu'à ce que toutes les cases à cocher
soient désélectionnées individuellement, puis il sera désactivé, ceci est mon démo stackblitz , je pourrais nous e toute suggestion pour résoudre ce problème,
3 Réponses :
En html, définissez une référence dans l'entrée " #checkboxes
"
changeCheck(){ let flag= true; this.checkboxes.forEach((element) => { // loop all checkboxes to find checked boxes if(element.nativeElement.checked){ flag=false // if atleast one checkbox checked, put the flag flase } }); this.disabledButton = flag; }
Dans ts,
Nous pouvons obtenir toutes les valeurs de case à cocher en utilisant @ViewChildren
@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>;
ViewChildren
, QueryList
, ElementRef
à importer depuis ' angular / core
'
<input type="checkbox" formControlName="isChecked" #checkboxes (click)="changeCheck()">
Code de travail à Stackblitz
Varman, votre solution fonctionne, mais je pense que ce n'est pas une "solution angulaire". La solution classique est de créer un validateur personnalisé
@jajanato si cette réponse est utile, veuillez voter pour et cliquer sur coche pour aider les autres qui cherchent ce type de question
Essayez le code ci-dessous:
changeCheck(event){ let flag = true for (let summon of this.formReceivedSummons.controls){ if(summon.get('isChecked').value) { flag = false } } this.disabledButton = flag }
la "solution classique" est de créer un validateur d'erreur personnalisé
Imaginez que vous en ayez comme
<input #check1 type="checkbox" (change)="selectAll(check1.checked)">Check All
Vous n'avez besoin que de
selectAll(select: boolean) { this.form.get("receivedSummons").setValue(this.options.map(x => select)); } selectAll2(select: boolean) { this.form2.get("receivedSummons").setValue( this.options.map(x => { return { isChecked: select }; }) ); }
C'est génial, je pense que je ne lui ai donné qu'une solution immédiate. Mais votre idée est tout à fait la bienvenue.
Vous devez gérer un tableau pour stocker les valeurs de toutes les cases à cocher. Donc, avec tout sélectionner, la valeur de tous les éléments du tableau est vraie. Lorsqu'une case à cocher individuelle est décochée, vous définissez la valeur false dans le tableau pour cette case à cocher. Pour désactiver le bouton Soumettre, il sera désactivé si tous les éléments du tableau sont faux, sinon vrai.