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.