2
votes

Comment activer / désactiver un bouton en fonction d'une case à cocher cochée dans Angular

J'essaie d'ajouter une validation au formulaire de mon application Angular.

La première section de mon formulaire contient:

1 case à cocher
Deux groupes de boutons radio
1 bouton (qui permet d'accéder à la section suivante du formulaire)

Le bouton doit être désactivé jusqu'à ce que l'utilisateur coche la case et choisisse une option dans les deux groupes de boutons radio.

Voici le code de mon bouton:

<checkbox
    id="accept"
    heading="I accept"
    name="accept"
    value="accept"
    [(ngModel)]="chkAcceptTerms"
    required
    #theChkAcceptTerms="ngModel">
</checkbox>

Et voici le code de ma case à cocher:

<button
    [disabled]="
        theChkAcceptTerms.invalid || 
        theInsuredType.invalid || 
        theReportInjury.invalid
        ">

Actuellement, lorsque la page se charge, le bouton est désactivé. Il n'est activé qu'une fois que j'ai coché la case et choisi une option dans les deux groupes de radio.

Cependant, si je décoche la case, le bouton n'est pas désactivé.

Peut quelqu'un s'il vous plaît dites-moi comment je peux désactiver le bouton ci-dessus si la case n'est pas cochée. Merci beaucoup!

angular

6 commentaires

veuillez créer stackblitz.com pour une meilleure compréhension de votre code source

Essayez de remplacer theChkAcceptTerms.invalid par ! ChkAcceptTerms dans la condition pour [disabled] .

@ConnorsFan Salut, si je fais cela, alors le bouton est activé sans avoir à cocher la case du tout

Veuillez noter que j'ai modifié mon commentaire précédent après quelques secondes. Assurez-vous que la condition est correcte et que chkAcceptTerms est initialement false .

@ConnorsFan Hé, j'ai ajouté le ! mais il se comporte toujours de la même manière. Le bouton est activé sans toucher la case à cocher

Êtes-vous sûr que chkAcceptTerms est initialement false ? Si tel est le cas, le bouton sera initialement désactivé. Veuillez noter que vous devez utiliser ! ChkAcceptTerms , pas ! TheChkAcceptTerms .

4 Réponses :

0
votes

si votre bouton doit être désactivé si votre formulaire n'est pas valide, utilisez

  theChkAcceptTerms: boolean;
  theInsuredType: boolean;
  theReportInjury: boolean;
  oneMoreCondition: boolean;
  canSubmit: boolean;
  ngForm = {}

  changed(status: boolean, control: string ){

    switch(control) { 
        case 'theChkAcceptTerms': { 
           this.theChkAcceptTerms = status
            break; 
        } 
        case 'theInsuredType': { 
            this.theChkAcceptTerms = status
            break; 
        } 
        case 'theReportInjury': { 
            this.theReportInjury = status
            break; 
        } 
        case 'oneMoreCondition': { 
           this.oneMoreCondition = status
            break; 
        } 
        default: { 
            break; 
        } 
    }
    if(this.theChkAcceptTerms &&  this.theChkAcceptTerms  &&   this.theReportInjury &&  this.oneMoreCondition){
      this.canSubmit = true;
    }else{
      this.canSubmit = false;
    }


  }

 <div class="container">
    <h1>Hero Form</h1>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
              required
              [(ngModel)]="ngForm.name" name="name">
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text"  class="form-control" id="alterEgo"
              [(ngModel)]="ngForm" name="alterEgo" (ngModelChange)="changed($event)" > 
      </div>

      <div class="form-group">
      <input type="checkbox" name="theInsuredType" value="theChkAcceptTerms"  [(ngModel)]="ngForm.theChkAcceptTerms"  (ngModelChange)="changed($event, 'theChkAcceptTerms')" > theChkAcceptTerms<br>
      <input type="checkbox" name="theInsuredType" value="theInsuredType"   [(ngModel)]="ngForm.theInsuredType" (ngModelChange)="changed($event, 'theInsuredType')"> theInsuredType<br>
      <input type="checkbox" name="theInsuredType" value="theReportInjury"  [(ngModel)]="ngForm.theReportInjury" (ngModelChange)="changed($event, 'theReportInjury')" > theReportInjury<br>
      <input type="checkbox" name="theInsuredType" value="oneMoreCondition"  [(ngModel)]="ngForm.oneMoreCondition" (ngModelChange)="changed($event, 'oneMoreCondition')" > theReportInjury<br>

      </div>


    <button type="submit" [disabled]="!canSubmit">Submit</button>


</div>

Modifié Dans votre Html

 <button type="submit" [disabled]="ngForm.invalid">Submit</button>

Puis Dans votre fichier component.ts

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

2 commentaires

Salut, merci pour votre réponse. Mais ma forme se compose de plusieurs accordéons. Le but de ce bouton est donc de passer à l'accordéon suivant (c'est-à-dire à la section suivante du même formulaire)

Alors ne le faites pas taper = "soumettre". Vous pouvez définir le comportement de votre bouton pour accéder à un élément spécifique par ID sur la page comme vous le feriez en HTML

0
votes

si theChkAcceptTerms est une variable booléenne alors essayez avec

<button [disabled]="!theChkAcceptTerms || theInsuredType.invalid ||  theReportInjury.invalid">

1 commentaires

Lorsque j'utilise ceci et que je choisis des options dans les groupes de boutons radio, le bouton est activé sans toucher la case à cocher

4
votes

Vous devez obtenir la liaison de données bidirectionnelle pour vos contrôles et les vérifier dans l'attribut disabled comme

[disabled]="!checkBox || !radioGroup1 || !radioGroup2"

Découvrez l'exemple que j'ai créé ICI

0 commentaires

0
votes

J'ai utilisé une variable de référence de modèle pour connecter ma case à cocher à l'état des boutons désactivés:

<mat-checkbox #confirmed>Yes, I confirm</mat-checkbox>
<button mat-button [disabled]="!confirmed.checked">Delete</button>

0 commentaires