web-dev-qa-db-fra.com

Angular2, bouton de désactivation si aucune case n'est cochée

J'ai plusieurs cases à cocher et un bouton qui doit être activé uniquement si au moins une case est cochée

<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>

Comment cela est-il réalisé avec Angular2?.

P.S: questions similaires trouvées mais n'utilisant pas Angular2.

checkboxangular
21
Khaled

Une solution consiste à utiliser ngModelsur chaque case à cocher, puis à contrôler la propriété disableddu bouton via une méthode qui examine l'état de chaque modèle de case à cocher:

@Component({
  template: `
    <label *ngFor="let cb of checkboxes">
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}
    </label>
    <p><button [disabled]="buttonState()">button</button>
  `
})
class App {
  checkboxes = [{label: 'one'},{label: 'two'}];
  constructor() {}
  buttonState() {
    return !this.checkboxes.some(_ => _.state);
  }
}

Plunker

42
Mark Rajcok

Utilisez la propriété [disabled] comme:

<input type="checkbox" [(ng-model)]="disableButton1"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton2"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton3"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton4"> VALUE1
<button type="button" [disabled]="disableButton || disableButton2">Submit</button>
9
Emir Marques

Vous pouvez effectuer n'importe quelle action en utilisant $ event dans la case à cocher change event de.

Échantillon:

HTML

<input type="checkbox" (change)="changeEvent($event)" />
<button [disabled]="toogleBool">button</button>

TS

 toggleBool: boolean=true;

 changeEvent(event) {
        if (event.target.checked) {
            this.toggleBool= false;
        }
        else {
            this.toggleBool= true;
        }
    }
0
Tk1993