如果选中一个或多个复选框，如何启用提交按钮？

Question

我在这里通过Mark的解决方案：Angular2, disable button if no checkbox selected 但我有超过1个数组，我该如何修改链接中的代码？

或者有任何其他解决方案的人来做这件事吗？我想这样做在angularJs 2

我有很多类（阵列）&这些类中的一些科目，&每个主题对应一个复选框，如果一个或更多的复选框被选中，不管他们属于到相同或不同的课程，该按钮应该启用。 下面的代码，现在它只考虑的Class1：

import {bootstrap} from 'angular2/platform/browser'; 

    import {Component} from 'angular2/core' 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <label *ngFor="let cb of class1"> 
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/> 
     </label><br/> 
      <label *ngFor="let cb of class6"> 
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/> 
     </label> 
     <p><button [disabled]="buttonState()">button</button></p> 
     ` 
    }) 
    class App { 

     class1 = [{label: 'English(class1-5)'},{label: 'Maths(class1-5)'}]; 

     class6 = [{label: 'English(class6-8)'},{label: 'Maths(class6-8)'}]; 


     buttonState() { 

     console.log('buttonState() called'); 

     return !this.class1.some(_ => _.state); 

     } 

    } 

Answer 1

我没有运行此代码，但这个想法是团结的复选框州一个PARAM。在下面的代码中，我使属性buttonState存储按钮状态。我还使用(ngModelChange)作为事件侦听器来调用方法setButtonState()。我没有在您的class1/class6数组中看到“状态”参数。

链接：

ngModelChange：使用https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

例如：Angular 2 ngModelChange select option, grab a specific property

@Component({ 
    selector: 'my-app', 
    template: ` 
<label *ngFor="let cb of classes"> 
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()"/>{{cb.label}} 
</label> 
<p><button [disabled]="buttonState">button</button></p>` 
}) 

export class AppComponent { 

    private buttonState: boolean = true; 

    private classes = [{label: 'English(class1-5)', state: false},{label: 'Maths(class1-5)', state: false}, 
    {label: 'English(class6-8)', state: false},{label: 'Maths(class6-8)', state: false} 
    ]; 

    setButtonState() { 

    let counter = 0; 
    for(let i=0;i<this.classes.length;i++) { 


      if (this.classes[i].state === true) { 
      counter++; 
      } 

     } 

     if (counter >= 2) { 
      this.buttonState = false; 
     } else { 
      this.buttonState = true; 
     } 
    } 
}