Angular2, deaktivieren Taste, wenn kein Kontrollkästchen

Question

ausgewählt Ich habe mehrere Kontrollkästchen und eine Schaltfläche, die nur werden muss aktiviert, wenn mindestens ein Kontrollkästchen aktiviert ist

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

Wie ist das mit Angular2 erreicht.

P.S: ähnliche Fragen gefunden, aber nicht mit Angular2.

Answer 1

Eine Möglichkeit ist ngModel auf jeder Checkbox zu verwenden, dann ist die disabled Eigenschaft der Schaltfläche steuern über eine Methode, die jedes Kontrollkästchen Modellzustand untersucht:

@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

Answer 2

die propertie Verwenden [disable] als:

<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> 

Answer 3

Sie c Führen Sie eine Aktion aus, indem Sie das Ereignis $ event in change für das Kontrollkästchen verwenden.

Probe:

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