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.
Une solution consiste à utiliser ngModel
sur chaque case à cocher, puis à contrôler la propriété disabled
du 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);
}
}
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>
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;
}
}