1
votes

bouton désactiver sur certaines cases à cocher de sélection

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,


1 commentaires

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.


3 Réponses :


1
votes

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


2 commentaires

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



0
votes

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
  }


0 commentaires

1
votes

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 };
      })
    );
  }


1 commentaires

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.